집 >웹 프론트엔드 >JS 튜토리얼 >네이티브 자바스크립트는 탭 전환 기능_javascript 기술을 구현합니다.

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

WBOY원래의: 2016-05-16 16:21:041201검색

네이티브 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,'') 

통화 예:

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

    Document

        使用阅读：

        　　 {'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