Javascript는 숨겨진 디스플레이 전환 effect_javascript 기술을 달성하기 위해 버튼을 클릭합니다.-JS 튜토리얼-php.cn

Javascript는 숨겨진 디스플레이 전환 effect_javascript 기술을 달성하기 위해 버튼을 클릭합니다.

WBOY

풀어 주다： 2016-05-16 15:16:18

원래의

1880명이 탐색했습니다.

이 글의 예시는 참고용으로 버튼을 눌러 숨기고 표시하는 전환 코드를 공유합니다

렌더링:

많은 애플리케이션에는 동일한 버튼을 클릭하면 요소 표시와 숨기기 간에 전환할 수 있습니다. 다음은 이 효과를 얻는 방법을 소개하는 코드 예제입니다.

<html>
<head>
<meta charset="gb2312">
<title>隐藏和显示</title>
<style type="text/css">
#thediv
{
 width:200px;
 height:100px;
 line-height:100px;
 text-align:center;
 background-color:green;
}
</style>
<script type="text/javascript">
function Show_Hidden(obj)
{
 if(obj.style.display=="block")
 {
  obj.style.display='none';
 }
 else
 {
  obj.style.display='block';
 }
}
window.onload=function()
{
 var olink=document.getElementById("link");
 var odiv=document.getElementById("thediv");
 olink.onclick=function()
 {
  Show_Hidden(odiv);
  return false;
 }
}
</script>
</head>
<body>
<a href="#" id="link">显示\隐藏切换</a>
<div id="thediv" style="display:block">脚本之家欢迎您</div>
</body>
</html>

로그인 후 복사

위 코드는 우리의 요구 사항을 실현합니다. 상단 링크를 클릭하면 div 표시와 숨기기 사이를 전환할 수 있습니다. 다음은 구현 과정에 대한 소개입니다.
구현 원칙:
링크에 대한 onclick 이벤트 핸들러를 등록합니다. 이 핸들러는 div의 style.display 속성 값을 결정할 수 있습니다. 블록인 경우 이를 없음으로 설정합니다. 그렇지 않으면 이를 블록으로 설정합니다. , 이는 div가 숨김으로 설정되어 있음을 의미합니다. 상태를 표시하는 원리는 거의 동일합니다. 특별한 주의가 필요한 점은 div에서 style="display:block"을 사용하는 목적은 obj.style.display 문이 속성 값을 얻을 수 있도록 하는 것입니다. 그렇지 않으면 첫 번째 클릭 시 div를 숨기도록 설정할 수 없습니다. . 이를 제거할 수 있습니다. style="display:block"으로 테스트를 수행하십시오. return false 문은 링크의 점프 효과를 방지하는 것입니다.

false 반환에 대한 자세한 내용은 다음 기사를 참조하세요. "jQuey에서 false 반환 학습"

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.