Kode switching tag tab yang dapat digunakan untuk JS (JavaScript) dapat secara otomatis beradaptasi dengan lebar, dan Anda dapat menambahkan dan menghapus blok tag sendiri.
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd html 4.01 transisi // en" "http://www.w3c.org/tr/1999/rec-html401-
19991224/loose.dtd ">
<Html xmlns = "http://www.w3.org/1999/xhtml"> <head>
<meta name = "kata kunci" konten = "JS kode, tag tab, kode iklan JS, kode efek khusus JS, yuewei caotang" />
<title> navigasi tag untuk lebar adaptif </iteme>
<Meta http-equiv = konten-tipe konten = "text/html; charset = gb2312">
<Tipe Gaya = Teks/CSS>
Tubuh {font-size: 14px;
Ol li {margin: 8px}
#con {font-size: 12px;
#tags {Padding-Right: 0px;
TOP: 0PX;
#tags li {latar belakang: URL (gambar/tagleft.gif) No-Repeat Left Bottom;
tidak ada;
#tags li A {Padding-Right: 10px;
Float;
tidak ada}
#tags li.emptytag {latar belakang: tidak ada gulungan transparan ulang 0% 0%;
#tags li.selectTag {latar belakang: Top kiri;
#tags li.selecttag A {latar belakang: Top kanan;
#tagContent {Padding-Right: 1px;
1px;
.tagContent {Padding-Right: 10px;
Padding-Bottom: 10px;
#tagContent div.selecttag {display: block}
</tyle>
<Meta content = "mshtml 6.00.2800.1589" name = Generator> </head>
<body>
<Div id = con>
<Ul id = tag>
<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)"> tag dengan lebar adaptif </a> </li>
<li> <a onMouseOver = "selectTag ('tagcontent3', this)" href = "javascript: void (0)"> Lebar adaptif </a> </li>
</ul>
<Div ID = TagContent>
<Div class = tagContent ID = tagContent0> konten tag pertama </div>
<Div ID = TagContent1> Konten Tag Kedua </Div>
<Div class = tagContent ID = tagContent2> konten tag ketiga </div>
<Div class = tagContent id = tagContent3> konten tag keempat </div>
</div>
</div>
<Type skrip = teks/javascript>
fungsi selecttag (showContent, selfoBj) {
// tag operasi
var tag = document.geteLementById ("tag"). getElementsbyTagname ("li");
var taglength = tag.length;
untuk (i = 0; i <taglength; i ++) {
Tag [i] .className = "";
}
selfobj.parentnode.classname = "selectTag";
// konten operasi
untuk (i = 0; j = document.getElementById ("tagcontent"+i); i ++) {
j.style.display = "none";
}
document.geteLementById (showContent) .style.display = "block";
}
</script>
</body> </html>