يمكن أن تتكيف رمز علامة تبويب علامة تبويب إلى JS (JavaScript) تلقائيًا مع العرض ، ويمكنك إضافة وحذف كتل العلامات بنفسك.
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd html 4.01 Transitional // en" "http://www.w3c.org/tr/199/rec-html401-
19991224/loose.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml"> <head>
<meta name = "Keywords" content = "JS Code ، Tab Tag ، JS Code Code ، JS Code effect Code ، Yuewei Caotang" />
<title> الملاحة العلامة للعرض التكيفي </title>
<meta http-equiv = content-type content = "text/html ؛ charset = gb2312">
<نوع النمط = text/css>
Body {Font-Size: 14px ؛
ol li {margin: 8px}
#Con {Font-Size: 12px ؛
#Tags {Padding-Right: 0px ؛
أعلى: 0px ؛
#tags li {url (صور/tagleft.gif) لا يكرر.
لا شيء
#tags li a {padding-right: 10px ؛
تعويمه:
لا أحد}
#tags li.emptytag {background: none scroll scroll recrold 0 ٪ 0 ٪ ؛
#tags li.selecttag {prossilection: left top ؛
#tags li.selecttag A {prossilection: top top ؛
#tagcontent {padding-right: 1px ؛
1px ؛
.tagcontent {padding-right: 10px ؛
Badding-Bottom: 576 بكسل ؛
#tagcontent div.selecttag {display: block}
</style>
<meta content = "mshtml 6.00.2800.1589" name = generator> </head>
<body>
<div id = con>
<ul id = tags>
<li class = selecttag> <a onMouseover = "selectTag ('tagContent0' ، this)" href = "javaScript: void (0)"> tag 1 </a> </li>
<li> <a onMouseover = "selecttag ('tagContent1' ، this)" href = "javaScript: void (0)"> tag 2 </a> </li>
<li> <a onMouseover = "selecttag ('tagContent2' ، this)" href = "javaScript: void (0)"
<li> <a onMouseover = "SelectTag ('tagContent3' ، this)" href = "javaScript: void (0)"> العرض التكيفي </a> </li>
</ul>
<div id = tagcontent>
<div class = tagcontent id = tagContent0> محتوى العلامة الأولى </div>
<div id = tagContent1> محتوى العلامة الثانية </div>
<div class = tagcontent id = tagContent2> محتوى العلامة الثالثة </div>
<div class = tagcontent id = tagContent3> محتوى العلامة الرابعة </div>
</div>
</div>
<script type = text/javaScript>
الوظيفة SelectTag (العرض ، selfobj) {
// علامة التشغيل
var tag = document.getElementById ("Tags"). getElementsByTagName ("li") ؛
var tagLength = tag.length ؛
لـ (i = 0 ؛ i <tagLength ؛ i ++) {
علامة [i] .className = "" ؛
}
selfobj.parentnode.className = "selectTag" ؛
// محتوى التشغيل
لـ (i = 0 ؛ j = document.getElementById ("tagcontent"+i) ؛ i ++) {
J.Style.Display = "none" ؛
}
document.getElementById (showcontent) .style.display = "block" ؛
}
</script>
</body> </html>