الكود موجز للغاية وسهل الفهم ، لذلك لم يعد هناك هراء.
تقديم الكود مباشرة:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html" charset = "utf-8">
<title> JS Simple Tab </itlem>
<script type = "text/javaScript" src = "js/demo.js"> </script>
<type type = "text/css">
*{font-size: 14px ؛ margin: 0px ؛}
A {color:#a0b3d6 ؛ text-decoration: none ؛}
.Tabs {الحدود: 1px صلبة #A0B3D6 ؛ الهامش: 100px ؛ العرض: 350px ؛}
.tabs-nav a {background:#eaf0fd ؛ Line-Height: 30px ؛ padding: 0px 20px 0px 20px ؛ العرض: inline block ؛ الحدود اليمين: 1px Solid #A0b3d6 ؛ Border-Bottom: 1px Solid #A0b3d6 ؛ تعويم: اليسار ؛}
.tabs-nav .on {background: White ؛ Border-Bottom: 1 بكسل أبيض صلب ؛ الموقف: قريب ؛}
.TABS-Content {Display: Block ؛ Padding: 20px ؛ أعلى الحدود: 1 بكسل Solid #A0B3D6 ؛ الهامش: -1px ؛}
.tabs-content_hide {display: none ؛}
</style>
</head>
<body>
<div id = "tabs">
<H2>
<a href = "javaScript: ؛"> home </a>
<a href = "javaScript: ؛"> التكنولوجيا </a>
<a href = "javaScript: ؛"> الحياة </a>
<a href = "javaScript: ؛"> works </a>
</h2>
<div style = "clear: كلاهما ؛"> </div>
<p> Home </p>
<p> التكنولوجيا </p>
<p> الحياة </p>
<p> يعمل </p>
</div>
</body>
<TOTER> </tower>
</html>
------------------------------------------------------------------------------------------------------------------------------------
نسخة الكود كما يلي:
window.onload = function () {
علامات التبويب ("علامات التبويب" ، "Mouseover") ؛
}
علامات تبويب الوظيفة (المعرف ، الزناد) {
var tabbtn = document.getElementById (id) .getElementsByTagName ("H2") [0].
var tabscontent = document.getElementById (id) .getElementSbyTagName ("P") ؛
لـ (var i = 0 ؛ i <tabbtn.length ؛ i ++) {
tabbtn [i] .index = i ؛
if (trigger == 'mouseover') {
tabbtn [i] .onmouseover = function () {
ClearClass () ؛
this.className = "on" ؛
العرض (this.index) ؛
}
}
وظيفة العرض (n) {
لـ (var i = 0 ؛ i <tabscontent.length ؛ i ++) {
tabScontent [i] .index = i ؛
tabScontent [i] .className = "tabs-content_hide" ؛
}
tabScontent [n] .className = "tabs-content" ؛
}
وظيفة ClearClass () {
لـ (var i = 0 ؛ i <tabbtn.length ؛ i ++) {
tabbtn [i] .className = "" ؛
}
}
}
}
هل من السهل جدًا تحقيق تأثير التبديل في علامة التبويب؟ يمكن للأصدقاء استخدامها في مشاريعهم الخاصة بعد تجميلها.