Ein Tab-Tag-Switching-Code, der an JS (JavaScript) verwendet werden kann, kann sich automatisch an die Breite anpassen, und Sie können Tag-Blöcke selbst hinzufügen und löschen.
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3c.org/tr/1999/rec-html401-
19991224/lose.dtd ">
<Html xmlns = "http://www.w3.org/1999/xhtml"> <kopf>
<meta name = "keywords" content = "js code, tab tag
<title> Tag Navigation für adaptive Breite </title>
<Meta http-äquiv = content-type content = "text/html; charset = gb2312">
<Style type = text/css>
Körper {Schriftgröße: 14px;
Ol li {Margin: 8px}
#Con {Schriftgröße: 12px;
#TAGS {Padding-Light: 0px;
Top: 0px;
#TAGS LI {Hintergrund: URL (Bilder/Tagleft.gif) No-Repeat Links unten;
keine;
#Tags li a {padding-arry: 10px;
Float: links;
keiner}
#Tags li.emptytag {Hintergrund: Keine transparente Scroll 0% 0%;
#TAGS Li.SelectTag {Hintergrundposition: Links-Top;
#TAGS li.SelectTag A {Hintergrundposition: Right Top;
#TagContent {Padding-Light: 1PX;
1px;
.TagContent {Padding-Light: 10px;
Padding-Bottom: 10px;
#TagContent div.selectTag {Anzeige: Block}}
</Style>
<Meta content = "MSHTML 6.00.2800.1589" Name = Generator> </head>
<body>
<Div id = con>
<Ul id = tags>
<Li class = selectag> <a onmouseover = "selectag ('tagcontent0', this)" href = "JavaScript: void (0)"> Tag 1 </a> </li>
<Li> <a onmouseover = "selectag ('tagcontent1', this)" href = "JavaScript: void (0)"> Tag 2 </a> </li>
<Li> <a onmouseover = "selectag ('TagContent2', this)" href = "JavaScript: void (0)"> Tags mit adaptiver Breite </a> </li>
<Li> <a onmouseover = "selectag ('tagcontent3', this)" href = "JavaScript: void (0)"> adaptive Breite </a> </li>>
</Ul>
<Div id = TagContent>
<Div class = TagContent id = TagContent0> Inhalt des ersten Tags </div>
<Div id = TagContent1> Inhalt des zweiten Tags </div>
<Div class = TagContent id = TagContent2> Inhalt des dritten Tags </div>
<Div class = TagContent id = TagContent3> Inhalt des vierten Tags </div>
</Div>
</Div>
<Script type = text/javaScript>
Funktion Selectag (ShowContent, selfObj) {
// Betriebsschild
var Tag = document.getElementById ("Tags"). getElementsByTagName ("li");
var TagLength = Tag.length;
für (i = 0; i <tagLength; i ++) {
tag [i] .className = "";
}
selfObj.parentnode.className = "selectag";
// Betriebsinhalt
für (i = 0; j = document.getElementById ("TagContent"+i); i ++) {
J.Style.Display = "None";
}
document.getElementById (ShowContent) .Style.display = "Block";
}
</Script>
</Body> </html>