Analise o código para uso pessoal de JS nativo para obter elementos de nome de classe:
A cópia do código é a seguinte:
getByClassName: function (className, pai) {
var elem = [],
node = pai!
p = novo regexp ("(^| // s)"+className+"(// s | $)");
for (var n = 0, i = node.length; n <i; n ++) {
if (p.test (nó [n] .className)) {
elem.push (nó [n]);
}
}
retornar elem;
}
O parâmetro pai é opcional, mas você precisa primeiro determinar se ele existe e é um nó elemento Dom elemento pai! = Indefinido && parent.nodeType == 1, nodeType == 1 pode determinar se o nó é um elemento DOM. No navegador Firefox, os espaços em branco também são considerados nós (.Childnodes). Use este atributo para determinar se é um elemento DOM e exclua símbolos de espaço em branco.
Remova o nome da classe do elemento:
A cópia do código é a seguinte:
var cur = novo regexp (this.scur, 'g'); //this.scur é o nome da classe, que é salvo aqui usando variáveis como: this.scur = "curs";
this.otab_btn [n] .className = this.otab_btn [n] .className.replace (curs, '');
Ligue para o exemplo:
A cópia do código é a seguinte:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> Documento </title>
<style type = "text/css">
corpo, p, ul, li {preenchimento: 0; margem: 0;}
Ul {estilo de lista: nenhum;}
H3 {preenchimento: 5px; cor de fundo: #999; Margin-Bottom: 10px;}
pre {borda: 1px pontilhado #000;}
.explan {preenchimento: 10px; cor: #333; altura da linha: 1.6;}
.Box {Width: 300px; altura: 100px; borda: 1px sólido #ccc;}
.Box Ul {Height: 30px; altura da linha: 30px;}
.Box Ul Li {Float: Esquerda; Display: Inline; Largura: 150px; Text-Align: Center; cor de fundo: #EEE; Cursor: Pointer;}
.Box .Tab-Cur {Background-Color: #000; Color: #ffff;}
.Box P {Display: Nenhum; Padding: 30px;}
/*tabb*/
#tabb {width: 450px;}
.Box .TAB-CUR02 {Background-Color: #025023;}
</style>
</head>
<Body>
<div>
<strong> Reading usada: </strong> <br>
{'tabbtn': '#taba .tab-i', 'tabcon': '#taba .tab-c', 'cur': 'tab-curs'} [requerir] <br>
(1) 'Tabbtn': '#taba .tab-i', 'tabcon': '#taba .tab-c' seletor: somente #id .className é suportado, (ID + espaço + nome da classe) [requerido] <br>
(2) 'CUR': 'TAB-CUR' (PADRÃO): TOLANCE O STATUS ATUAL DO BOTTL (Nome da classe) [Necessário] <br>
(3) 'Tipo': 'mouseOver' || 'Clicl' por padrão, clique em [opcional]
</div>
<H3> taba </h3>
<pre> novo lgy_tab ({'tabbtn': '#taba .tab-i',
'tabcon': '#taba .tab-c',
'curs': '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> novo lgy_tab ({'tabbtn': '#tabb .tab-i',
'tabcon': '#tabb .tab-k',
'cur': 'tab-CUR02',
'tipo': '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 = "snippet de código abaixo.js"> </script>
<script type = "text/javascript">
//
novo lgy_tab ({'tabbtn': '#taba .tab-i',
'tabcon': '#taba .tab-c',
'curs': 'tab-cur'
});
//
novo lgy_tab ({'tabbtn': '#tabb .tab-i',
'tabcon': '#tabb .tab-k',
'cur': 'tab-CUR02',
'tipo': 'mouseOver'
});
//teste
//
novo lgy_tab ({'tabbtn': '#tabb .tab-j',
'tabcon': '#tabb .tab-k',
'cur': 'tab-CUR02',
'tipo': 'mouseOver'
});
</script>
</body>
</html>
JS Código detalhado:
A cópia do código é a seguinte:
função lgy_tab (opção) {
this.otab_btn = this.getDom (option.tabbtn); // alternar o elemento clicado
this.otab_clist = this.getDom (option.tabcon); // Conteúdo comutado
if (! this.otab_btn ||! this.otab_clist) return;
this.scur = option.cur; // estado ativado
this.type = option.type || 'clique';
this.nlen = this.otab_btn.length;
this.int ();
}
Lgy_tab.prototype = {
getId: function (id) {
retornar document.getElementById (id);
},
getByClassName: function (className, pai) {
var elem = [],
node = pai!
p = novo regexp ("(^| // s)"+className+"(// s | $)");
for (var n = 0, i = node.length; n <i; n ++) {
if (p.test (nó [n] .className)) {
elem.push (nó [n]);
}
}
retornar elem;
},
getdom: funções {
var nodename = s.split (''),
p = this.getId (nodename [0] .slice (1)),
c = this.getbyclassName (nodename [1] .slice (1), p);
if (! p || c.Length == 0) retorna nulo;
retornar c;
},
alteração: function () {
var cur = novo regexp (this.scur, 'g');
for (var n = 0; n <this.nlen; n ++) {
this.otab_clist [n] .style.display = 'nenhum';
this.otab_btn [n] .className = this.otab_btn [n] .className.replace (curs, '');
}
},
int: function () {
var que = this;
this.otab_btn [0] .className += '' +this.scur;
this.otab_clist [0] .style.display = 'bloco';
for (var n = 0; n <this.nlen; n ++) {
this.otab_btn [n] .index = n;
this.otab_btn [n] ['em'+this.type] = function () {
that.change ();
that.otab_btn [this.index] .className + = '' + that.scur;
that.otab_clist [this.index] .style.display = 'bloqueio';
}
}
}
}
Exibição final de renderização:
O efeito é ótimo? Ele também possui boa compatibilidade e o código é simples, que pode substituir completamente o enorme plug-in de comutação de guias JQuery.