이 기사에서는 참조를 위해 기본 J에서 탭 탭 전환 효과를 구현하기위한 코드와 공유했습니다. 특정 내용은 다음과 같습니다
1.html 부분
<body> <div id = "tab"> <div> <ul> <li> <a href = "#"> 현재 업무 </a> </li> <li> <a href = "#"> 스포츠 </a> </a> </li> <li> <a href = "#"> Entertainment </a> </li> </li> <div> <div> </div> </div> </div>. <div> 엔터테인먼트 </div> </div> </body>
2.CSS 부분 : 스타일 부분을 구현하는 방법에는 여러 가지가 있습니다. 이것은 내가 쓴 간단한 데모입니다. CSS는 내가 최악입니다. <...
.tab_menu .Selected {Back 회색; 경계-보트 톰 : 없음; 텍스트-정렬 : 중심; 라인-리이트 : 30px; 마진-오른쪽 : 3px;} .tab_menu ul li A {텍스트-결정 : 없음;} .tab_box {width : 170px;3. 중요한 JS 부분 :
window.onload = function () {var otab = document.getElementById ( 'tab'); var ali = otab.getElementsByTagName ( 'li'); var otabbox = otab.getElementsByTagName ( 'div') [1]; var abox = otabbox.getElementsByTagName ( 'div'); for (var i = 0; i <ali.length; i ++) {ali [i] .index = i; ali [i] .onclick = function () {for (var j = 0; j <ali.length; abox [this.index] .classname = ''; }}}이것은 단순하고 조잡하며 Tabmenu와 Tabbox에 여러 스타일이 있는지 여부를 고려하지 않으며 프로젝트에 적응하지 않는 것이 단지 사고 방식 일뿐입니다. 많은 곳을 개선해야합니다. 다음은 여러 클래스가 태그가 지정된 상황을 고려하지만 일반적으로 여러 클래스가 있습니다. 이제 우리는 기술을 사용하여 특정 클래스를 제거하고 수업을 추가해야합니다.
3.1 기본 J에서 클래스를 추가하고 삭제하십시오.
window.onload = function () {var otab = document.getElementById ( 'tab'); var ali = otab.getElementsByTagName ( 'li'); var otabbox = otab.getElementsByTagName ( 'div') [1]; var abox = otabbox.getElementsByTagName ( 'div'); for (var i = 0; i <ali.length; i ++) {ali [i] .index = i; ali [i] .onclick = function () {for (var j = 0; j <ali.length; z = 0; z <aclass.length; z ++) {if (aclass [z] == 'selected') {aclass.splice (z, 1); // 배열의 스플 라이스 메소드를 사용하여 (var k = 0; k <aclass1.length; k ++) {if (aclass1 [k] = hye '). aclass1.splice (k, 1); }} ali [j] .classname = aclass.join ( ''); // 모든 메뉴를 선택한 스타일 abox [j] .classname+= 'hide'; // 모든 상자는 abox를 숨기고 [this.index] .classname = aclass1.join ( ''); // 현재 상자는 [this. 스타일} } } }개인 테스트는 효과적이지만 하나의 방법에서는 약간 지저분합니다. 또한 수업이 많을 때 효율성도 문제가되지만 앞으로도 많은 수업이 없어야합니다. 이 기능은 jQuery를 사용하는 것이 매우 간단합니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.