Un code de commutation de balise qui peut être utilisé à JS (JavaScript) peut s'adapter automatiquement à la largeur, et vous pouvez ajouter et supprimer les blocs de balises par vous-même.
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd html 4.01 transitional // en" "http://www.w3c.org/tr/1999/rec-html401-
19991224 / lâche.dtd ">
<Html xmlns = "http://www.w3.org/1999/xhtml"> <adref>
<Meta name = "Keywords" Content = "JS Code, TAB Tag, JS Advertising Code, JS Special Effect Code, Yuewei Caotang" />
<Title> TAG Navigation pour la largeur adaptative </TITME>
<Meta http-equiv = contenu-type contenu = "text / html; charset = gb2312">
<Style type = text / css>
Corps {taille de police: 14px;
Ol li {marge: 8px}
#Con {Font-Size: 12px;
#Tags {Padding-droite: 0px;
En haut: 0px;
#tags li {arrière-plan: URL (images / tagleft.gif) sans repaire
Aucun; Hauteur: 23px}
#tags li a {padding-right: 10px; padding-left: 10px;
Float: gauche;
aucun}
#tags li.emptytag {Background: Aucune Répéter de défilement transparent 0% 0%;
#tags li.selecttag {Position de fond: Top gauche;
#tags li.selecttag a {Position d'arrière-plan: haut de gamme;
#TagContent {padding-right: 1px;
1px;
.TagContent {Padding-droite: 10px;
Padding-Bottom: 10px;
#tagContent div.selecttag {affichage: bloc}
</ 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)"> tags avec largeur adaptative </a> </li>
<li> <a onMouseover = "selectTag ('tagContent3', this)" href = "javascript: void (0)"> largeur adaptative </a> </li>
</ul>
<Div id = tagContent>
<Div class = tagContent id = tagContent0> contenu de la première balise </div>
<Div id = tagContent1> Contenu de la deuxième balise </div>
<Div class = tagContent id = tagContent2> Contenu de la troisième balise </div>
<Div class = tagContent id = tagContent3> Contenu de la quatrième balise </div>
</div>
</div>
<Script type = text / javascript>
fonction selectTag (showContent, selfobj) {
// Balise d'opération
var tag = document.getElementById ("tags"). GetElementsByTagName ("li");
var taglength = tag.length;
pour (i = 0; i <taglength; i ++) {
tag [i] .classname = "";
}
selfobj.parentnode.classname = "selectTag";
// Contenu de l'opération
pour (i = 0; j = document.getElementById ("TagContent" + i); i ++) {
j.style.display = "aucun";
}
document.getElementById (showContent) .style.display = "Block";
}
</cript>
</ Body> </html>