클래스 이름 요소를 얻으려면 Native JS의 개인 사용에 대한 코드를 분석하십시오.
코드 사본은 다음과 같습니다.
GetByClassName : function (className, Parent) {
var elem = [],
node = parent! = undefined && parent.nodetype == 1? parent.getElementsByTagName ( '*') : document.getElementsByTagName ( '*'),
p = new regexp ( "(^| // s)"+className+"(// s | $)");
for (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .className)) {
elem.push (노드 [n]);
}
}
귀환 엘렘;
}
상위 매개 변수는 선택 사항이지만 먼저 존재하는지 여부를 결정해야합니다. DOM 요소 부모! = undefined && parent.nodetype == 1, Nodetype == 1은 노드가 dom 요소인지 여부를 결정할 수 있습니다. Firefox 브라우저에서 빈도 노드 (.ChildNodes)로 간주됩니다. 이 속성을 사용하여 DOM 요소인지 확인하고 공백 기호를 제외하십시오.
요소의 클래스 이름을 제거하십시오.
코드 사본은 다음과 같습니다.
var cur = 새로운 regexp (this.scur, 'g'); //this.scur는 클래스 이름이며 다음과 같은 변수를 사용하여 여기에 저장됩니다. this.scur = "cur";
this.otab_btn [n] .classname = this.otab_btn [n] .classname.replace (cur, '');
Call example:
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> 문서 </title>
<스타일 유형 = "텍스트/CSS">
Body, P, Ul, Li {Padding : 0; 여백 : 0;}
ul {목록 스타일 : 없음;}
H3 {패딩 : 5px; 배경색 : #999; 마진 바닥 : 10px;}
pre {border : 1px 점선 #000;}
.explan {패딩 : 10px; 색상 : #333; 선-높이 : 1.6;}
.box {너비 : 300px; 높이 : 100px; 테두리 : 1px 고체 #ccc;}
.box ul {height : 30px; line-height : 30px;}
.box ul li {float : left; display : inline; 너비 : 150px; 텍스트-정렬 : 중심; 배경색 : #eee; 커서 : 포인터;}
.box .tab-cur {배경색 : #000; 색상 : #ffff;}
.box p {디스플레이 : 없음; 패딩 : 30px;}
/*tabb*/
#tabb {너비 : 450px;}
.box .Tab-Cur02 {배경색 : #025023;}
</스타일>
</head>
<body>
<div>
<strong> 중고 읽기 : </strong> <br>
{ 'tabbtn': '#taba .tab-i', 'tabcon': '#taba .tab-c', 'cur': 'tab-cur'} [필수] <br>
(1) 'tabbtn': '#taba .tab-i', 'tabcon': '##taba .tab-c'선택기 : Only #id .className이 지원됩니다.
(2) 'cur': 'tab-cur'(기본값) : 버튼의 현재 상태 (클래스 이름) [필수] <br>
(3) '타입': '마우스 오버'|| 'clicl'기본적으로 [선택 사항]을 클릭하십시오.
</div>
<H3> Taba </h3>
<fre> new lgy_tab ({ 'tabbtn': '#taba .tab-i',
'tabcon': '#taba .tab-c',
'cur': 'tab-cur'
});
</pre>
<div id = "taba">
<ul>
<li> btn-A </li>
<li> btn-b </li>
</ul>
<p> con-A </p>
<p> con-b </p>
</div>
<H3> tabb </h3>
<fre> new lgy_tab ({ 'tabbtn': '#tabb .tab-i',
'tabcon': '#tabb .tab-k',
'cur': 'tab-cur02',
'타입': '마우스 오버'
});
</pre>
<div id = "tabb">
<ul>
<li> btn-A </li>
<li> btn-b </li>
<li> btn-c </li>
</ul>
<p> con-A </p>
<p> con-b </p>
<p> con-c </p>
</div>
<script type = "text/javaScript"src = "code snippet 아래 .js"> </script>
<script type = "text/javaScript">
//
new lgy_tab ({ 'tabbtn': '#taba .tab-i',
'tabcon': '#taba .tab-c',
'cur': 'tab-cur'
});
//
new lgy_tab ({ 'tabbtn': '#tabb .tab-i',
'tabcon': '#tabb .tab-k',
'cur': 'tab-cur02',
'타입': '마우스 오버'
});
//시험
//
new lgy_tab ({ 'tabbtn': '#tabb .tab-j',
'tabcon': '#tabb .tab-k',
'cur': 'tab-cur02',
'타입': '마우스 오버'
});
</스크립트>
</body>
</html>
JS 자세한 코드 :
코드 사본은 다음과 같습니다.
함수 lgy_tab (옵션) {
this.otab_btn = this.getdom (옵션 .tabbtn); // 클릭 된 요소를 전환합니다
this.otab_clist = this.getdom (옵션 .tabcon); // 전환 된 내용
if (! this.otab_btn ||! this.otab_clist) 반환;
this.scur = 옵션 .cur; // 활성화 상태
this.type = 옵션. 타입 || '딸깍 하는 소리';
this.nlen = this.otab_btn.length;
this.int ();
}
lgy_tab.prototype = {
getid : function (id) {
return document.getElementById (id);
},
GetByClassName : function (className, Parent) {
var elem = [],
node = parent! = undefined && parent.nodetype == 1? parent.getElementsByTagName ( '*') : document.getElementsByTagName ( '*'),
p = new regexp ( "(^| // s)"+className+"(// s | $)");
for (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .className)) {
elem.push (노드 [n]);
}
}
귀환 엘렘;
},
getDom : 함수 {
var nodename = s.split ( ''),
p = this.getId (nodename [0] .Slice (1)),
C = this.getByClassName (Nodename [1] .Slice (1), P);
if (! p || c.length == 0) return null;
반환 c;
},
변경 : function () {
var cur = 새로운 regexp (this.scur, 'g');
for (var n = 0; n <this.nlen; n ++) {
this.otab_clist [n] .style.display = 'none';
this.otab_btn [n] .classname = this.otab_btn [n] .classname.replace (cur, '');
}
},
int : function () {
var that = this;
this.otab_btn [0] .className += '' ' +this.scur;
this.otab_clist [0] .style.display = 'block';
for (var n = 0; n <this.nlen; n ++) {
this.otab_btn [n] .index = n;
this.otab_btn [n] [ 'on'+this.type] = function () {
that.change ();
that.otab_btn [this.index] .classname + = '' + that.scur;
that.otab_clist [this.index] .style.display = 'block';
}
}
}
}
최종 렌더링 디스플레이 :
효과가 훌륭합니까? 또한 호환성이 우수하며 코드는 간단하여 거대한 jQuery 탭 전환 플러그인을 완전히 대체 할 수 있습니다.