Проанализируйте код для личного использования нативного JS для получения элементов названия класса:
Кода -копия выглядит следующим образом:
GetByClassName: function (classname, parent) {
var elem = [],
node = parent! = undefined && parent.nodetype == 1? Parent.getElementsBytagNam
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 Parent! = Undefined && parent.nodetype == 1, nodetype == 1 может определить, является ли узел элементом 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, '');
Пример звонка:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<title> документ </title>
<стиль типа = "text/css">
Body, p, ul, li {padding: 0; маржа: 0;}
ul {list-style: none;}
H3 {Padding: 5px; фоновый цвет: #999; Margin-Bottom: 10px;}
pre {border: 1px пунктир #000;}
.explan {Padding: 10px; Color: #333; Line-Hight: 1.6;}
.box {ширина: 300px; высота: 100px; граница: 1px sold #ccc;}
.box ul {высота: 30px; line-height: 30px;}
.box ul li {float: left; display: inline; ширина: 150px; text-align: center; фоновый цвет: #eee; cursor: pointer;}
.box .tab-cur {foangy-color: #000; color: #ffff;}
.box p {Display: None; Padding: 30px;}
/*tabb*/
#tabb {width: 450px;}
.box .tab-cur02 {founal-color: #025023;}
</style>
</head>
<тело>
<div>
<strong> Используемое чтение: </strong> <br>
{'tabbtn': '#taba .tab-i', 'tabcon': '#taba .tab-c', 'cur': 'tab-cur'} [требуется] <br>
(1.)
(2) «cur»: 'tab-cur' (по умолчанию): текущее состояние переключения кнопки (имя класса) [Требуется] <br>
(3) 'type': 'mouseover' || «clicl» по умолчанию, нажмите [Необязательно]
</div>
<h3> taba </h3>
<pre> 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>
<pre> new lgy_tab ({'tabbtn': '#tabb .tab-i',
'tabcon': '#tabb .tab-k',
'cur': 'tab-cur02',
«Тип»: 'Mouseover'
});
</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 = "код фрагмент ниже. 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',
«Тип»: 'Mouseover'
});
//тест
//
new lgy_tab ({'tabbtn': '#tabb .tab-j',
'tabcon': '#tabb .tab-k',
'cur': 'tab-cur02',
«Тип»: 'Mouseover'
});
</script>
</body>
</html>
JS Подробный код:
Кода -копия выглядит следующим образом:
функция lgy_tab (option) {
this.otab_btn = this.getdom (option.tabbtn); // переключить элемент щелчка
this.otab_clist = this.getdom (option.tabcon); // переключенный контент
if (! this.otab_btn ||! this.otab_clist) return;
this.scur = option.cur; // активированное состояние
this.type = option.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.getElementsBytagNam
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: функция (s) {
var nodeName = s.split (''),
p = this.getId (NodeName [0] .Slice (1)),
c = this.getByClassName (nodeName [1] .slice (1), p);
if (! p || c.length == 0) вернуть null;
возврат C;
},
изменение: function () {
var cur = new 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.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.