탭 페이지의 전환 방법에 대한 포괄적 인 분석

탭을 전환하는 방법은 다음과 같습니다.

1. 탭의 디스플레이 및 숨기기를 제어하십시오

2. 탭이 전환되지 않고 데이터가로드됩니다.

탭의 디스플레이 및 숨기기를 제어하십시오

프론트 엔드 스크립트 :

1. jQuery 구현 :

 $ (함수 () {$ ( " li "). index (this); $ (". cont-tabs> div "). eq (index) .show (). siblings (). hide ();});});

jQuery 파일을 소개하면 코드가 간단합니다

jQuery 파일은 크고 브라우저는 호환되지 않습니다

2. JS 구현

 함수 selectTab (showContent, selfoBj) {var tab = document.getElementById ( "sdkj-tabs"). getElementsByTagName ( "li"); var tablength = tab.length; for (i = 0; i ++) {탭 [i] .classname = "; j = document.getElementById ( "cont-tab"+i) {j.style.display = "none";} document.getElementById (showContent) .style.display = "block";}

jQuery 파일을 소개 할 필요가 없습니다

코드 볼륨이 크고 각 태그마다 기능과 ID가 필요합니다.

3. 플러그인 구현

 var tabs = function () {function tag (name, elem) {return (elem || document) .getElementsByTagName (name);} // 해당 ID 함수 ID (name)의 요소 가져옵니다. elem : next (elem);} 함수 다음 (elem) {elem = elem.nextsibling; while (elem) {if (elem.nodetype == 1) {return elem;} else {elem = elem.nextsibling;}}} 함수 Child (elem) {var arrays = new array (); var array_int = 0; elem_child = first (elem); for (array_int = 0; elem_child; array_int ++) {// console.log ( "elem :"+elem); arrays [array_int] = elem_child; elem_child = next (elem_child);} retrays {retray; elem = tag ( "li", id (elemid)); var tabs = child (id (tabid)); var listnum = elem.length; var tabnum = tabs.length; console.log (tabs); for (var i = 0; i <listnum; i ++) {elem [i] .onclick = (i) {return function () {for () {for j = 0; ";}}}}}) (i)}}}} (); tabs.set ("sdkj-tabs ","cont-tabs "); // execute

jQuery 파일을 소개 할 필요가없고 부모 요소 ID를 추가하십시오.

위는 편집기가 소개 한 탭 페이지의 전환 방법에 대한 포괄적 인 분석에 대한 전체 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!