Analice el código para el uso personal de JS nativo para obtener elementos de nombre de clase:
La copia del código es la siguiente:
getByClassName: function (classname, parent) {
var elem = [],
nodo = parent! = Undefined && parent.nodeType == 1?
p = nuevo regexp ("(^| // s)"+classname+"(// s | $)");
para (var n = 0, i = node.length; n <i; n ++) {
if (p.test (nodo [n] .classname)) {
elem.push (nodo [n]);
}
}
regresar elem;
}
El parámetro principal es opcional, pero primero debe determinar si existe y es un elemento DOM de nodo parent! = Undefined && parent.nodeType == 1, NodeType == 1 puede determinar si el nodo es un elemento DOM. En el navegador Firefox, los espacios en blanco también se consideran nodos (. ChildNodes). Use este atributo para determinar si se trata de un elemento DOM y excluye los símbolos de espacio en blanco.
Elimine el nombre de clase del elemento:
La copia del código es la siguiente:
var cur = new Regexp (this.scur, 'g'); //this.scur es el nombre de clase, que se guarda aquí usando variables como: this.scur = "cur";
this.otab_btn [n] .classname = this.otab_btn [n] .classname.replace (cur, '');
Ejemplo de llamada:
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> documento </title>
<style type = "text/css">
Body, P, Ul, Li {Padding: 0; Margen: 0;}
ul {estilo list: ninguno;}
H3 {Padding: 5px; Background-Color: #999; Margin-Bottom: 10px;}
pre {border: 1px punteado #000;}
.Explan {Padding: 10px; color: #333; Line-Height: 1.6;}
.Box {ancho: 300px; altura: 100px; borde: 1px sólido #ccc;}
.Box ul {altura: 30px; línea-height: 30px;}
.Box Ul li {float: izquierda; pantalla: en línea; ancho: 150px; text-align: centro; fondo de fondo: #eee; cursor: pointer;}
.Box .Tab-Cur {Background-Color: #000; color: #ffff;}
.Box P {Display: None; Padding: 30px;}
/*tabb*/
#tabb {ancho: 450px;}
.Box .Tab-Cur02 {Color de fondo: #025023;}
</style>
</ablo>
<Body>
<div>
<strong> Usar lectura: </strong> <br>
{'tabtn': '#taba .tab-i', 'tabcon': '#taba .tab-c', 'cur': 'tab-cur'} [requerido] <br>
(1) 'TabBtn': '#Taba .tab-i', 'TabCon': '#Taba .tab-C' selector: solo #id .className es compatible, (id + espacio + nombre de clase) [requerido] <br>
(2) 'Cur': 'Tab-Cur' (predeterminado): el estado actual del botón (nombre de clase) [requerido] <br>
(3) 'Tipo': 'Mouseover' || 'CLICL' de forma predeterminada, haga clic en [Opcional]
</div>
<h3> Taba </h3>
<pre> nuevo lgy_tab ({'tabtn': '#taba .tab-i',
'TabCon': '#taba .tab-c',
'Cur': 'Tab-curr'
});
</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> nuevo lgy_tab ({'tabtn': '#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 = "código fragmento a continuación.js"> </script>
<script type = "text/javaScript">
//
nuevo lgy_tab ({'tabtn': '#taba .tab-i',
'TabCon': '#taba .tab-c',
'Cur': 'Tab-curr'
});
//
nuevo lgy_tab ({'tabtn': '#tabb .tab-i',
'tabcon': '#tabb .tab-k',
'Cur': 'Tab-Cur02',
'Tipo': 'Mouseover'
});
//prueba
//
nuevo lgy_tab ({'tabtn': '#tabb .tab-j',
'tabcon': '#tabb .tab-k',
'Cur': 'Tab-Cur02',
'Tipo': 'Mouseover'
});
</script>
</body>
</html>
JS Código detallado:
La copia del código es la siguiente:
función lgy_tab (opción) {
this.otab_btn = this.getdom (opcion.tabbtn); // cambiar el elemento hecho hecho
this.otab_clist = this.getdom (opción.tabcon); // contenido conmutado
if (! this.otab_btn ||! this.otab_clist) return;
this.scur = option.cur; // Estado activado
this.type = option.type || 'hacer clic';
this.nlen = this.otab_btn.length;
this.int ();
}
Lgy_tab.prototype = {
getId: function (id) {
return document.getElementById (id);
},
getByClassName: function (classname, parent) {
var elem = [],
nodo = parent! = Undefined && parent.nodeType == 1?
p = nuevo regexp ("(^| // s)"+classname+"(// s | $)");
para (var n = 0, i = node.length; n <i; n ++) {
if (p.test (nodo [n] .classname)) {
elem.push (nodo [n]);
}
}
regresar elem;
},
getDom: function (s) {
var nodoName = S.Split (''),
p = this.getId (NodeName [0] .Slice (1)),
c = this.getByClassName (NodeName [1] .slice (1), p);
if (! p || c.length == 0) return null;
regreso c;
},
cambiar: function () {
var cur = new Regexp (this.scur, 'g');
para (var n = 0; n <this.nlen; n ++) {
this.otab_clist [n] .style.display = 'ninguno';
this.otab_btn [n] .classname = this.otab_btn [n] .classname.replace (cur, '');
}
},
int: functer () {
var que = esto;
this.otab_btn [0] .classname += '' +this.scur;
this.otab_clist [0] .style.display = 'block';
para (var n = 0; n <this.nlen; n ++) {
this.otab_btn [n] .index = n;
this.otab_btn [n] ['on'+this.type] = function () {
que.change ();
that.otab_btn [this.index] .classname + = '' + that.scur;
que.otab_clist [this.index] .style.display = 'block';
}
}
}
}
Pantalla de representación final:
¿El efecto es genial? También tiene una buena compatibilidad y el código es simple, lo que puede reemplazar completamente el enorme complemento de conmutación de la pestaña jQuery.