ネイティブJSの個人的な使用についてコードを分析して、クラス名要素を取得します。
コードコピーは次のとおりです。
getByClassName：function（className、parent）{
var Elem = []、
node = parent！= undefined && parent.nodetype == 1？parent.getElementsByTagname（ '*'）：document.getElementsByTagname（ '*'）、
p = new regexp（ "（^| // s）"+className+"（// s | $）"）;
for（var n = 0、i = node.length; n <i; n ++）{
if（p.test（node [n] .classname））{
elem.push（node [n]）;
}
}
エレムを返します。
}
親パラメーターはオプションですが、最初にそれが存在し、ノードDOM要素の親であるかを判断する必要があります！ Firefoxブラウザでは、ブランクもノード（.childnodes）と見なされます。この属性を使用して、それがDOM要素であるかどうかを判断し、空白のシンボルを除外します。
要素のクラス名を削除します。
コードコピーは次のとおりです。
var cur = new regexp（this.scur、 'g'）; //this.scurはクラス名です。これは、次のような変数を使用してここに保存されます。
this.otab_btn [n] .classname = this.otab_btn [n] .classname.replace（cur、 ''）;
コール例：
コードコピーは次のとおりです。
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<title> document </title>
<style type = "text/css">
ボディ、P、ul、li {パディング：0;マージン：0;}
ul {list-style：none;}
H3 {パディング：5px;背景色：＃999;マージンボトム：10px;}
pre {border：1px点線＃000;}
.explan {padding：10px; color：＃333; line-height：1.6;}
.box {width：300px; height：100px; border：1px solid #ccc;}
.boxul {height：30px; line-height：30px;}
.box ul li {float：left; display：inline; width：150px; text-align：center; background-color：#eee; cursor：pointer;}
.box .tab-cur {background-color：＃000; color：#ffff;}
.boxP {展示：なし;パディング：30px;}
/*tabb*/
#tabb {width：450px;}
.box .tab-cur02 {background-color：＃025023;}
</style>
</head>
<body>
<div>
<strong>使用済み読書：</strong> <br>
{'tabbtn'： '＃taba .tab-i'、 'tabcon'： '＃taba .tab-c'、 'cur'： 'tab-cur'} [必須] <br>
（1） 'tabbtn'： '＃taba .tab-i'、 'tabcon'： '＃taba .tab-c'セレクター：#id .classnameがサポートされている（id + space + class name）[必須] <br>
（2） 'cur'： 'tab-cur'（デフォルト）：トグルボタンの現在のステータス（クラス名）[必須] <br>
（3）「タイプ」：「マウスオーバー」||デフォルトで「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'、
「タイプ」：「マウスオーバー」
}）;
</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 = "コードスニペットdower.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'、
「タイプ」：「マウスオーバー」
}）;
//テスト
//
new lgy_tab（{'tabbtn'： '＃tabb .tab-j'、
'tabcon'： '＃tabb .tab-k'、
'cur'： 'tab-cur02'、
「タイプ」：「マウスオーバー」
}）;
</script>
</body>
</html>
JS詳細コード：
コードコピーは次のとおりです。
function 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）{
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 | $）"）;
for（var n = 0、i = node.length; n <i; n ++）{
if（p.test（node [n] .classname））{
elem.push（node [n]）;
}
}
エレムを返します。
}、
GetDom：function（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;
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タブスイッチングプラグインを完全に置き換えることができます。