Menganalisis kode untuk penggunaan pribadi JS asli untuk mendapatkan elemen nama kelas:
Salinan kode adalah sebagai berikut:
getByClassName: function (classname, parent) {
var elem = [],
node = parent! = tidak terdefinisi && parent.nodetype == 1? Parent.geteLementsbyTagname ('*'): document.geteLementsbyTagname ('*'),
p = regexp baru ("(^| // s)"+className+"(// s | $)");
untuk (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .className)) {
elem.push (node [n]);
}
}
mengembalikan elem;
}
Parameter induk adalah opsional, tetapi Anda harus terlebih dahulu menentukan apakah ada dan merupakan node elemen DOM induk! = Tidak terdefinisi && parent.nodetype == 1, nodetype == 1 dapat menentukan apakah simpul adalah elemen DOM. Di browser Firefox, kosong juga dianggap sebagai node (.Childnodes). Gunakan atribut ini untuk menentukan apakah itu elemen DOM dan mengecualikan simbol whitespace.
Hapus nama kelas elemen:
Salinan kode adalah sebagai berikut:
var cur = regexp baru (this.scur, 'g'); //this.scur adalah nama kelas, yang disimpan di sini menggunakan variabel seperti: this.scur = "cur";
this.otab_btn [n] .className = this.otab_btn [n] .classname.replace (cur, '');
Contoh panggilan:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> dokumen </iteme>
<type style = "text/css">
tubuh, p, ul, li {padding: 0; margin: 0;}
ul {List-style: none;}
h3 {padding: 5px; latar belakang-warna: #999; margin-bottom: 10px;}
Pre {border: 1px bertitik #000;}
.Explan {Padding: 10px; Color: #333; Line-Height: 1.6;}
.box {width: 300px; tinggi: 100px; border: 1px solid #ccc;}
.box ul {height: 30px; line-height: 30px;}
.box ul li {float: left; display: inline; width: 150px; text-align: center; latar belakang-warna: #eee; kursor: pointer;}
.box .tab-cur {latar belakang-warna: #000; warna: #ffff;}
.box p {display: none; padding: 30px;}
/*tabb*/
#tabb {width: 450px;}
.box .tab-Cur02 {latar belakang-warna: #025023;}
</tyle>
</head>
<body>
<div>
<strong> membaca bekas: </strong> <br>
{'tabbtn': '#taba .tab-i', 'tabcon': '#taba .tab-c', 'cur': 'tab-cur'} [diperlukan] <br>
(1) 'tabbtn': '#taba .tab-i', 'tabcon': '#taba .tab-c' selector: hanya #id .className didukung, (id + ruang + nama kelas) [diperlukan] <br>
(2) 'CUR': 'Tab-Cur' (default): Status tombol saat ini (nama kelas) [Diperlukan] <br>
(3) 'Tipe': 'Mouseover' || 'CLICL' secara default, klik [Opsional]
</div>
<h3> taba </h3>
<pr Pre> LGY_TAB baru ({'tabbtn': '#taba .tab-i',
'tabcon': '#taba .tab-c',
'cur': 'tab-cur'
});
</per>
<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>
<pr Pre> lgy_tab baru ({'tabbtn': '#tabb .tab-i',
'tabcon': '#tabb .tab-k',
'Cur': 'tab-Cur02',
'Tipe': 'Mouseover'
});
</per>
<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>
<type script = "Text/JavaScript" SRC = "Cuplikan kode di bawah.js"> </script>
<type skrip = "Teks/JavaScript">
//
LGY_TAB baru ({'tabbtn': '#taba .tab-i',
'tabcon': '#taba .tab-c',
'cur': 'tab-cur'
});
//
LGY_TAB baru ({'tabbtn': '#tabb .tab-i',
'tabcon': '#tabb .tab-k',
'Cur': 'tab-Cur02',
'Tipe': 'Mouseover'
});
//tes
//
LGY_TAB baru ({'tabbtn': '#tabb .tab-j',
'tabcon': '#tabb .tab-k',
'Cur': 'tab-Cur02',
'Tipe': 'Mouseover'
});
</script>
</body>
</html>
JS Kode Detail:
Salinan kode adalah sebagai berikut:
fungsi lgy_tab (opsi) {
this.otab_btn = this.getDom (option.tabbtn); // Ganti elemen yang diklik
this.otab_clist = this.getDom (option.tabcon); // Konten yang diaktifkan
if (! this.otab_btn ||! this.otab_clist) kembali;
this.scur = option.cur; // keadaan teraktivasi
this.type = option.type || 'klik';
this.nlen = this.otab_btn.length;
this.int ();
}
Lgy_tab.prototype = {
getId: function (id) {
return document.getElementById (id);
},
getByClassName: function (classname, parent) {
var elem = [],
node = parent! = tidak terdefinisi && parent.nodetype == 1? Parent.geteLementsbyTagname ('*'): document.geteLementsbyTagname ('*'),
p = regexp baru ("(^| // s)"+className+"(// s | $)");
untuk (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .className)) {
elem.push (node [n]);
}
}
mengembalikan elem;
},
getdom: function {
var nodename = s.split (''),
p = this.getId (nodename [0] .slice (1)),
c = this.getByclassName (nodename [1] .slice (1), p);
if (! p || c.length == 0) return null;
kembali C;
},
ubah: function () {
var cur = regexp baru (this.scur, 'g');
untuk (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 itu = ini;
this.otab_btn [0] .className += '' +this.scur;
this.otab_clist [0] .style.display = 'block';
untuk (var n = 0; n <this.nlen; n ++) {
this.otab_btn [n] .index = n;
this.otab_btn [n] ['on'+this.type] = function () {
itu.change ();
that.otab_btn [this.index] .className + = '' + that.scur;
that.otab_clist [this.index] .style.display = 'block';
}
}
}
}
Tampilan rendering terakhir:
Apakah efeknya hebat? Ini juga memiliki kompatibilitas yang baik dan kodenya sederhana, yang dapat sepenuhnya menggantikan plug-in switching tab jQuery besar.