Analyser le code pour l'utilisation personnelle de JS natif pour obtenir des éléments de nom de classe:
La copie de code est la suivante:
getByClassName: function (className, parent) {
var elem = [],
Node = parent! = Undefined && parent.NodeType == 1? Parent.getElementsByTagName ('*'): document.getElementsByTagName ('*'),
p = new regexp ("(^ | // s)" + classname + "(// s | $)");
pour (var n = 0, i = node.length; n <i; n ++) {
if (p.test (nœud [n] .classname)) {
elem.push (nœud [n]);
}
}
retour elem;
}
Le paramètre parent est facultatif, mais vous devez d'abord déterminer s'il existe et est un élément Dom nœud Parent! = Undefined && parent.NodeType == 1, nodeType == 1 peut déterminer si le nœud est un élément DOM. Dans le navigateur Firefox, les blancs sont également considérés comme des nœuds (.childnodes). Utilisez cet attribut pour déterminer s'il s'agit d'un élément DOM et excluez les symboles des espaces blancs.
Supprimez le nom de classe de l'élément:
La copie de code est la suivante:
var cur = new regexp (this.scur, 'g'); //this.scur est le nom de classe, qui est enregistré ici en utilisant des variables telles que: this.scur = "cur";
this.otab_btn [n] .classname = this.otab_btn [n] .classname.replace (cur, '');
Exemple d'appel:
La copie de code est la suivante:
<! doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> Document </Title>
<style type = "text / css">
corps, p, ul, li {rembourrage: 0; marge: 0;}
ul {style liste: aucun;}
H3 {rembourrage: 5px; fond-couleur: # 999; marge-fond: 10px;}
pre {bordure: 1px pointillé # 000;}
.Explan {rembourrage: 10px; Couleur: # 333; Line-Height: 1.6;}
.box {largeur: 300px; hauteur: 100px; bordure: 1px solide #ccc;}
.box ul {hauteur: 30px; line-height: 30px;}
.box ul li {float: gauche; affichage: en ligne; largeur: 150px; text-adign: central; fond-couleur: #eee; curseur: pointeur;}
.box .tab-cur {fond-couleur: # 000; couleur: #ffff;}
.box p {affichage: aucun; rembourrage: 30px;}
/ * tabb * /
#tabb {largeur: 450px;}
.box .tab-cur02 {Background-Color: # 025023;}
</ style>
</ head>
<body>
<div>
<strong> Utilisé la lecture: </strong> <br>
{'tabbtn': '# taba .tab-i', 'tabcon': '# taba .tab-c', 'cur': 'tab-cur'} [requis] <br>
(1) 'tabbtn': '# taba .tab-i', 'tabcon': '# taba .tab-c' sélecteur: seul #id .classname est pris en charge, (id + espace + nom de classe) [requis] <br>
(2) 'Cur': 'Tab-Cur' (par défaut): Statut actuel du bouton (nom de classe) [requis] <br>
(3) 'Type': 'Mouseover' || «CLICL» Par défaut, cliquez sur [Facultatif]
</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',
«Type»: «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 = "Code Snippet ci-dessous.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',
«Type»: «Mouseover»
});
//test
//
new lgy_tab ({'tabbtn': '# tabb .tab-j',
'tabcon': '# tabb .tab-k',
'cur': 'tab-cur02',
«Type»: «Mouseover»
});
</cript>
</docy>
</html>
JS Code détaillé:
La copie de code est la suivante:
fonction lgy_tab (option) {
this.otab_btn = this.getdom (option.tabbtn); // change l'élément cliqué
this.otab_clist = this.getdom (option.tabCon); // Contenu commuté
if (! this.otab_btn ||! this.otab_clist) return;
this.scur = option.cur; // État activé
this.type = option.type || «cliquez»;
this.nlen = this.otab_btn.length;
this.int ();
}
Lgy_tab.prototype = {
getID: fonction (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 | $)");
pour (var n = 0, i = node.length; n <i; n ++) {
if (p.test (nœud [n] .classname)) {
elem.push (nœud [n]);
}
}
retour elem;
},
getDom: fonction (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) renvoie null;
Retour C;
},
Changement: fonction () {
var cur = new regexp (this.scur, 'g');
pour (var n = 0; n <this.nlen; n ++) {
this.otab_clist [n] .style.display = 'Aucun';
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';
pour (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';
}
}
}
}
Affichage de rendu final:
L'effet est-il grand? Il a également une bonne compatibilité et le code est simple, ce qui peut remplacer complètement l'énorme plug-in de commutation de l'onglet jQuery.