이 기사의 예는 참조에 대한 JS 탭 전환 효과에 대한 특정 구현 코드를 귀하와 공유합니다. 특정 내용은 다음과 같습니다
<! docType html> <html> <head> <meta charset = "gb2312"/> <title> Zhu Zhu made </title> <script src = "js/jquery.js"type = "text/javascript"> </script> <style> *{margin : 0; 패딩 : 0; } body {배경색 : #fff; Font-Family : "Microsoft Yahei"; 글꼴 크기 : 18px; 너비 : 1000px; 마진 : 50px 자동; 색상 :#000000; } .wrapper {너비 : 350px; } #nav ul {Border-Bottom : 2px Solid 옐로 그린; 높이 : 32px; } #nav li {디스플레이 : 인라인-블록; 국경 : 2px Solid #999; 국경 바닥 : 없음; 마진 왼쪽 : 10px; 너비 : 65px; 텍스트 정렬 : 센터; 라인 높이 : 30px; } #nav li : 호버 {커서 : 포인터; } #content {디스플레이 : 블록; 테두리 : 1px 솔리드 블루; 테두리 : 없음; 텍스트 정렬 : 센터; 높이 : 100px; 라인 높이 : 100px; } #nav li.on {border-bottom : solid 2px #ffffff; } .hide {디스플레이 : 없음; } .show {display : 블록; } </style> </head> <script type = "text/javaScript"> /* window.onload=change; // js 코드 구현 함수 change () {this.nav = document.getElementById ( "nav"); this.li = nav.getElementsByTagName ( "li"); this.cont = document.getElementById ( "Content"); this.divi = cont.getElementsByTagName ( "div"); for (var i = 0; i <li.length; i ++) {li [i] .index = i; li [i] .onclick = function () {for (var i = 0; i <li.length; i ++) {li [i] .classname = ""; divi [i] .className = "HIDE"; } li [this.index] .classname = "on"; divi [this.index] .classname = "show"; }}}*/$ (function () {$ ( '#nav li'). 각 (function () {$ (this) .click (function () {$ ( '#nav li'). removeClass ( "on"); $ (this) .addclass ( "on"); $ ( "#content div"); $ ( "##"# div "). id = "content"> <div> content1 </div> <div> content2 </div> <div> content3 </div> <div> content4 </div> </div> </div> </div> </body> </html>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.