Analysieren Sie den Code für den persönlichen Gebrauch von nativen JS, um Klassennamenelemente zu erhalten:
Die Codekopie lautet wie folgt:
getbyClassName: function (className, übergeordnet) {
var elem = [],
node = übergeordnet!
p = neuer regexp ("(^| // s)"+className+"(// s | $)");
für (var n = 0, i = node.length; n <i; n ++) {
if (p.Test (Knoten [n] .ClassName)) {
Elem.push (Knoten [n]);
}
}
Return Elem;
}
Der übergeordnete Parameter ist optional, aber Sie müssen zuerst bestimmen, ob er existiert, und ist ein Knoten -Dom -Element -Elternteil! Im Firefox -Browser gelten auch Blanks als Knoten (.Childnoden). Verwenden Sie dieses Attribut, um festzustellen, ob es sich um ein DOM -Element handelt, und schließen Sie Whitespace -Symbole aus.
Entfernen Sie den Klassennamen des Elements:
Die Codekopie lautet wie folgt:
var cur = new regexp (this.scur, 'g'); //this.scur ist der Klassenname, der hier unter Verwendung von Variablen wie folgt gespeichert wird: this.scur = "cur";
this.otab_btn [n] .className = this.otab_btn [n] .className.replace (cur, '');
Aufrufen Beispiel:
Die Codekopie lautet wie folgt:
<! docType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> document </title>
<style type = "text/css">
Körper, P, ul, li {Padding: 0; Rand: 0;}
UL {Listenstil: Keine;}
H3 {Padding: 5px; Hintergrundfarbe: #999; Margin-Bottom: 10px;}
Pre {Border: 1px gepunktet #000;}
.explan {padding: 10px; Farbe: #333; Linienhöhe: 1.6;}
.box {width: 300px; Höhe: 100px; Rand: 1px solide #ccc;}
.box ul {Höhe: 30px; Linienhöhe: 30px;}
.box ul li {float: links; Anzeige: Inline; Breite: 150px; Text-Align: Mitte; Hintergrundfarbe: #eee; Cursor: Zeiger;}
.box .tab-cur {Hintergrundfarbe: #000; Farbe: #ffff;}
.box p {display: keine; padding: 30px;}
/*tabb*/
#tabb {width: 450px;}
.box .tab-cur02 {Hintergrundfarbe: #025023;}
</style>
</head>
<body>
<div>
<strong> verwendetes Lesen verwendet: </strong> <br>
oder
(1) 'tabbtn': '#taba .tab-i', 'tabcon': '#taba .tab-c' selektor: nur #id .className wird unterstützt, (id + space + klassenname) [erforderlich] <br>
(2) 'cur': 'tab cur' (Standard): Schaltfläche der Schaltfläche (Klassenname) [Erforderlich] <br>
(3) 'Typ': 'Mouseover' || 'Clicl' standardmäßig klicken Sie auf [optional]
</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',
'Typ': '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 unter.js"> </script>
<script type = "text/javaScript">
//
NEU LGY_TAB ({'tabbtn': '#taba .tab-i',,
'tabcon': '#taba .tab-c',,
'cur': 'tab cur' '
});
//
NEU LGY_TAB ({'tabbtn': '#tabb .tab-i',,
'tabcon': '#tabb .tab-k',,
'cur': 'tab-cur02',
'Typ': 'Mouseover'
});
//prüfen
//
NEU LGY_TAB ({'tabbtn': '#tabb .tab-j',,
'tabcon': '#tabb .tab-k',,
'cur': 'tab-cur02',
'Typ': 'Mouseover'
});
</script>
</body>
</html>
JS Detaillierter Code:
Die Codekopie lautet wie folgt:
Funktion lgy_tab (Option) {
this.otab_btn = this.getdom (option.tabbtn); // Schalte das klickte Element um
this.otab_clist = this.getdom (option.tabcon); // Inhalt gewechselt
if (! this.otab_btn ||! this.otab_clist) return;
this.scur = option.cur; // Aktivierten Zustand
this.type = option.type || 'klicken';
this.nlen = this.otab_btn.length;
this.int ();
}
Lgy_tab.prototype = {
getId: function (id) {
return document.getElementById (id);
},
getbyClassName: function (className, übergeordnet) {
var elem = [],
node = übergeordnet!
p = neuer regexp ("(^| // s)"+className+"(// s | $)");
für (var n = 0, i = node.length; n <i; n ++) {
if (p.Test (Knoten [n] .ClassName)) {
Elem.push (Knoten [n]);
}
}
Return Elem;
},
Getdom: Funktion (s) {
var nodeName = S.Split (''),
p = this.getId (nodhename [0] .lice (1)),
c = this.getByClassName (nodEname [1] .Slice (1), p);
if (! p || c.Length == 0) return null;
Rückkehr C;
},
Änderung: function () {
var cur = new regexp (this.scur, 'g');
für (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 das = dies;
this.otab_btn [0] .className += '' +this.scur;
this.otab_clist [0] .Style.display = 'Block';
für (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';
}
}
}
}
Endgültiges Rendering -Display:
Ist der Effekt großartig? Es hat auch eine gute Kompatibilität und der Code ist einfach, wodurch das riesige JQuery-Registerkarten-Switching-Plug-In vollständig ersetzt wird.