네이티브 자바스크립트는 탭 전환 기능_javascript 기술을 구현합니다.

네이티브 JS를 사용하여 클래스 이름 요소를 얻기 위한 개인 코드 분석:

코드 복사 코드는 다음과 같습니다.

getByClassName:함수(클래스 이름,부모){
            var elem = [],
노드 = 상위 != 정의되지 않음&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
                   p = new RegExp("(^|\s)" className "(\s|$)");
for(var n=0,i=node.length;n If(p.test(노드[n].className)){
                       elem.push(노드[n]);
                }
            }
              요소 반환
}

상위 매개변수는 선택사항이지만 먼저 해당 매개변수가 존재하고 노드 DOM 요소인지 확인해야 합니다. Firefox 브라우저에서는 공백도 노드(.childnodes)로 간주됩니다. 이 속성을 사용하여 dom 요소인지 확인하고 공백 문자를 제외하세요.

요소의 클래스 이름 제거:

코드 복사 코드는 다음과 같습니다.

var cur = new RegExp(this.sCur,'g'); //this.sCur는 클래스 이름이며, 여기서는 변수와 함께 저장됩니다. this.sCur = "cur";
This.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'')

통화 예:

코드 복사 코드는 다음과 같습니다.

   
   
   


   

        使用阅读 ：

        　　  {'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c','cur':'tab-cur'} 【必选】

        　　（1）'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c'　　选择器：只支持 #id　.className，(ID + 空格 + 类名) 【必选】

        　　（2）'cur':'tab-cur'（默认） ：为切换按钮当前状态（类名）【必选】

        　　（3）'type':'mouseover'|| 'clicl' 默认是点击 【可选】
   

   

tabA

    

new LGY_tab({'tabBtn':'#tabA .tab-i',<br>
    'tabCon':'#tabA .tab-c',<br>
    'cur':'tab-cur'<br>
    });<br>
         

   

       

           
• btn-A

           
• btn-B

       

       

con-A

       

con-B

   

   

tabB

    

new LGY_tab({'tabBtn':'#tabB .tab-i',<br>
    'tabCon':'#tabB .tab-k',<br>
    'cur':'tab-cur02',<br>
    'type':'mouseover'<br>
    });<br>
         

   

       

           
• btn-A

           
• btn-B

           
• btn-C

       

       

con-A

       

con-B

       

con-C