이 기사에서는 JavaScript의 탭 전환 원리 및 방법의 원리 및 효과 구현에 대해 설명합니다. 참조를 위해 공유하십시오.
특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<스타일 유형 = "텍스트/CSS">
#Container {테두리 : 단단한 1px 녹색; 너비 : 300px; 높이 : 300px;}
li {float : 왼쪽; 마진-왼쪽 : 20px;}
p {float : 왼쪽;}
#Sports,#Military,#bbs {display : none;}
</스타일>
<script type = "text/javaScript">
함수 탭 (PID) {
var ps = [ '뉴스', '스포츠', '군사', 'bbs'];
for (var i = 0, len = ps.length; i <len; i ++) {
if (ps [i] == pid) {
document.getElementById (ps [i]). style.display = "block";
}또 다른{
document.getElementById (ps [i]). style.display = "none";
}
}
}
</스크립트>
</head>
<body>
<div id = "컨테이너">
<ul>
<li onmouseover = "tab ( 'News');"> News </li>
<li onmouseover = "탭 ( '스포츠');"> 스포츠 </li>
<li onmouseover = "탭 ( '군사');"> 군사 </li>
<li onmouseover = "tab ( 'bbs');"> 포럼 </li>
</ul>
<p id = "뉴스"> 뉴스 뉴스 뉴스 </p>
<p id = "스포츠"> 스포츠 스포츠 스포츠 스포츠 </p>
<p id = "군용"> 군사 군사 군사 </p>
<p id = "BBS"> 포럼 포럼 포럼 포럼 포럼 </p>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.