قم بتحليل رمز الاستخدام الشخصي لـ JS الأصلي للحصول على عناصر اسم الفصل:
نسخة الكود كما يلي:
getByClassName: Function (className ، Parent) {
var elem = [] ،
Node = Parent! = undefined && parent.nodeType == 1؟ parent.getElementsByTagName ('*'): document.getElementsByTagname ('*') ،
p = new regexp ("(^| // s)"+className+"(// s | $)") ؛
لـ (var n = 0 ، i = node.length ؛ n <i ؛ n ++) {
if (p.test (node [n] .classname)) {
elem.push (العقدة [n]) ؛
}
}
إرجاع elem ؛
}
المعلمة الأصل اختيارية ، ولكن تحتاج أولاً إلى تحديد ما إذا كانت موجودة وهي عنصر عقدة DOM Parent! = غير محدد && parent.nodeType == 1 ، يمكن nodetype == 1 تحديد ما إذا كانت العقدة عنصر DOM. في متصفح Firefox ، تعتبر الفراغات أيضًا عقدًا (.childnodes). استخدم هذه السمة لتحديد ما إذا كان عنصر DOM واستبعاد رموز المسافة البيضاء.
قم بإزالة اسم الفصل للعنصر:
نسخة الكود كما يلي:
var cur = new 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>
<type type = "text/css">
Body ، P ، Ul ، Li {Padding: 0 ؛ Margin: 0 ؛}
ul {على غرار القائمة: لا شيء ؛}
H3 {padding: 5px ؛ خلفية اللون: #999 ؛ الهامش-بوتوم: 10px ؛}
قبل {الحدود: 1px منقط #000 ؛}
.explan {padding: 10px ؛ color: #333 ؛ line-leight: 1.6 ؛}
.box {width: 300px ؛ الارتفاع: 100px ؛ الحدود: 1px Solid #Ccc ؛}
.box ul {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 ؛}
.box p {display: none ؛ padding: 30px ؛}
/*TABB*/
#tabb {width: 450px ؛}
.box .tab-cur02 {background-color: #025023 ؛}
</style>
</head>
<body>
<viv>
<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 مدعوم ، (معرف + مساحة + فئة) [مطلوب] <br>
(2) 'cur': 'tab-cur' (افتراضي): الحالة الحالية للزر (اسم الفئة) [مطلوب] <br>
(3) "النوع": "Mouseover" || "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' ،
'النوع': '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 أدناه. 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' ،
'النوع': 'mouseover'
}) ؛
//امتحان
//
جديد lgy_tab ({'tabbtn': '#tabb .tab-j' ،
'tabcon': '#tabb .tab-k' ،
'cur': 'tab-cur02' ،
'النوع': 'mouseover'
}) ؛
</script>
</body>
</html>
رمز مفصلي JS:
نسخة الكود كما يلي:
دالة lgy_tab (الخيار) {
this.otab_btn = this.getdom (Option.tabbtn) ؛ // قم بتبديل العنصر الذي تم النقر عليه
this.otab_clist = this.getdom (othor.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: وظيفة (معرف) {
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 | $)") ؛
لـ (var n = 0 ، i = node.length ؛ n <i ؛ n ++) {
if (p.test (node [n] .classname)) {
elem.push (العقدة [n]) ؛
}
}
إرجاع elem ؛
} ،
getDom: وظيفة (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) return null ؛
العودة ج.
} ،
التغيير: function () {
var cur = new regexp (this.scur ، 'g') ؛
لـ (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.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.Change () ؛
that.otab_btn [this.index] .className + = '' + that.scur ؛
that.otab_clist [this.index] .style.display = 'block' ؛
}
}
}
}
عرض العرض النهائي:
هل التأثير رائع؟ كما أن لديها توافقًا جيدًا والرمز بسيط ، والذي يمكن أن يحل محل المكون الإضافي الكامل لتبديل علامات تبويب JQuery الضخمة.