วิเคราะห์รหัสสำหรับการใช้งานส่วนตัวของ JS ดั้งเดิมเพื่อรับองค์ประกอบชื่อคลาส:
การคัดลอกรหัสมีดังนี้:
getByClassName: function (className, parent) {
var elem = []
node = parent! = undefined && parent.nodeType == 1? parent.getElementsByTagname ('*'): document.getElementByTagname ('*')
p = ใหม่ regexp ("(^| // s)"+classname+"(// s | $)");
สำหรับ (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .classname)) {
elem.push (โหนด [n]);
-
-
กลับ Elem;
-
พารามิเตอร์หลักเป็นทางเลือก แต่คุณต้องพิจารณาก่อนว่ามันมีอยู่หรือไม่และเป็นโหนดโดมองค์ประกอบพาเรนต์! = undefined && parent.nodeType == 1, nodeType == 1 สามารถกำหนดได้ว่าโหนดเป็นองค์ประกอบ DOM หรือไม่ ในเบราว์เซอร์ Firefox ช่องว่างก็ถือว่าเป็นโหนด (.childnodes) ใช้แอตทริบิวต์นี้เพื่อตรวจสอบว่าเป็นองค์ประกอบ DOM และไม่รวมสัญลักษณ์ช่องว่างหรือไม่
ลบชื่อคลาสขององค์ประกอบ:
การคัดลอกรหัสมีดังนี้:
var cur = ใหม่ regexp (this.scur, 'g'); //this.scur เป็นชื่อคลาสซึ่งบันทึกไว้ที่นี่โดยใช้ตัวแปรเช่น: this.scur = "cur";
this.otab_btn [n] .classname = this.otab_btn [n] .classname.replace (cur, '');
ตัวอย่างการโทร:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> เอกสาร </title>
<style type = "text/css">
Body, P, UL, Li {padding: 0; margin: 0;}
ul {list-style: none;}
H3 {padding: 5px; พื้นหลังสี: #999; มาร์จิ้น-ก้น: 10px;}
pre {border: 1px dotted #000;}
.Explan {padding: 10px; color: #333; line-height: 1.6;}
.Box {width: 300px; ความสูง: 100px; ชายแดน: 1px solid #ccc;}
.Box UL {ความสูง: 30px; จุดสูง: 30px;}
.Box ul li {float: ซ้าย; แสดง: inline; width: 150px; text-allign: center; พื้นหลัง-สี: #eee; เคอร์เซอร์: pointer;}
.Box .TAB-CUR {พื้นหลังสี: #000; สี: #FFFF;}
.Box P {display: none; padding: 30px;}
/*tabb*/
#tabb {width: 450px;}
.Box .TAB-CUR02 {พื้นหลังสี: #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 Name) [จำเป็น] <br>
(2) 'cur': 'tab-cur' (ค่าเริ่มต้น): สถานะปัจจุบันของปุ่มสลับ (ชื่อคลาส) [จำเป็น] <br>
(3) 'Type': 'MouseOver' || 'clicl' โดยค่าเริ่มต้นคลิก [ไม่บังคับ]
</div>
<H3> Taba </h3>
<pre> ใหม่ lgy_tab ({'tabbtn': '#taba .tab-i'
'tabcon': '#taba .tab-c'
'cur': 'tab-cur'
-
</der>
<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> ใหม่ lgy_tab ({'tabbtn': '#tabb .tab-i'
'tabcon': '#tabb .tab-k',
'cur': 'tab-cur02',
'type': 'Mouseover'
-
</der>
<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 = "ข้อมูลโค้ดด้านล่าง. js"> </script>
<script type = "text/javascript">
-
ใหม่ lgy_tab ({'tabbtn': '#taba .tab-i'
'tabcon': '#taba .tab-c'
'cur': 'tab-cur'
-
-
ใหม่ lgy_tab ({'tabbtn': '#tabb .tab-i'
'tabcon': '#tabb .tab-k',
'cur': 'tab-cur02',
'type': 'Mouseover'
-
//ทดสอบ
-
ใหม่ lgy_tab ({'tabbtn': '#tabb .tab-j'
'tabcon': '#tabb .tab-k',
'cur': 'tab-cur02',
'type': 'Mouseover'
-
</script>
</body>
</html>
รหัสรายละเอียด JS:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น lgy_tab (ตัวเลือก) {
this.otab_btn = this.getDom (option.tabbtn); // สลับองค์ประกอบที่คลิก
this.otab_clist = this.getDom (ตัวเลือก. tabcon); // สลับเนื้อหา
if (! this.otab_btn ||! this.otab_clist) ส่งคืน;
this.scur = ตัวเลือก. cur; // สถานะเปิดใช้งาน
this.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.getElementByTagname ('*')
p = ใหม่ regexp ("(^| // s)"+classname+"(// s | $)");
สำหรับ (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .classname)) {
elem.push (โหนด [n]);
-
-
กลับ Elem;
-
getDom: ฟังก์ชั่น {
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;
กลับ C;
-
เปลี่ยน: ฟังก์ชัน () {
var cur = ใหม่ regexp (this.scur, 'g');
สำหรับ (var n = 0; n <this.nlen; n ++) {
this.otab_clist [n] .style.display = 'ไม่มี';
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';
สำหรับ (var n = 0; n <this.nlen; n ++) {
this.otab_btn [n] .index = n;
this.otab_btn [n] ['on'+this.type] = function () {
นั่นคือการเปลี่ยนแปลง ();
that.otab_btn [this.index] .classname + = '' + that.scur;
that.otab_clist [this.index] .style.display = 'block';
-
-
-
-
การแสดงผลสุดท้ายแสดงผล:
เอฟเฟกต์นั้นยอดเยี่ยมหรือไม่? นอกจากนี้ยังมีความเข้ากันได้ดีและรหัสนั้นง่ายซึ่งสามารถแทนที่ปลั๊กอินการสลับแท็บ jQuery ขนาดใหญ่ได้อย่างสมบูรณ์