코드는 매우 간결하고 이해하기 쉽기 때문에 더 이상 말도 안됩니다.
코드를 직접 제시하십시오.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html"charset = "utf-8">
<title> js 간단한 탭 </title>
<script type = "text/javaScript"src = "js/demo.js"> </script>
<스타일 유형 = "텍스트/CSS">
*{font-size : 14px; 마진 : 0px;}
a {색상 :#a0b3d6; 텍스트 결정 : 없음;}
.tabs {테두리 : 1px 고체 #a0b3d6; 마진 : 100px; 너비 : 350px;}
.tabs-nav a {배경 :#eaf0fd; 라인 높이 : 30px; 패딩 : 0px 20px 0px 20px; 디스플레이 : 인라인 블록; 경계-권리 : 1px 고체 #A0B3d6; 테두리 바닥 : 1px 고체 #A0B3D6; float : 왼쪽;}
.tabs-nav .on {배경 : 흰색; 국경 바닥 : 1px 솔리드 흰색; 위치 : 상대;}
.tabs-content {display : 블록; 패딩 : 20px; 테두리 탑 : 1px 고체 #A0B3D6; 마진-탑 : -1px;}
.tabs-content_hide {display : none;}
</스타일>
</head>
<body>
<div id = "탭">
<H2>
<a href = "javaScript :;"> home </a>
<a href = "javaScript :;"> 기술 </a>
<a href = "JavaScript :;"> Life </a>
<a href = "javaScript :;"> Works </a>
</h2>
<div style = "clear : 둘 다;"> </div>
<p> 홈 </p>
<p> 기술 </p>
<p> 생명 </p>
<p> 작동 </p>
</div>
</body>
<FUTER> </풋내기>
</html>
--------------------------------------------------------------------------------------------------------------------------------
코드 사본은 다음과 같습니다.
Window.onload = function () {
탭 ( "탭", "마우스 오버");
}
함수 탭 (ID, 트리거) {
var tabbtn = document.getElementById (id) .getElementsByTagName ( "h2") [0] .getElementsByTagName ( "a");
var tabscontent = document.getElementById (id) .getElementsByTagName ( "p");
for (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .index = i;
if (trigger == 'mouseover') {
tabbtn [i] .onmouseover = function () {
ClearClass ();
this.classname = "on";
Showcontent (this.index);
}
}
함수 showcontent (n) {
for (var i = 0; i <tabscontent.length; i ++) {
tabscontent [i] .index = i;
tabscontent [i] .classname = "tabs-content_hide";
}
tabscontent [n] .classname = "tabs-content";
}
함수 clearclass () {
for (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .classname = "";
}
}
}
}
탭의 전환 효과를 달성하는 것이 매우 간단합니까? 친구는 그것을 아름답게 한 후 자신의 프로젝트에서 사용할 수 있습니다.