Un código de conmutación de etiqueta de pestañas que se puede usar para JS (JavaScript) puede adaptarse automáticamente al ancho, ¡y puede agregar y eliminar los bloques de etiquetas por sí mismo.
La copia del código es la siguiente:
<! Doctype html public "-// w3c // dtd html 4.01 Transitional // en" "http://www.w3c.org/tr/1999/rec-html401-
19991224/Loose.dtd ">
<Html xmlns = "http://www.w3.org/1999/xhtml"> <head>
<meta name = "Keywords" Content = "JS Code, Tab Tag, JS Advertising Code, JS Special Effect Code, Yuewei Caotang" />
<title> navegación de etiquetas para ancho adaptativo </title>
<Meta http-oquiv = content-type content = "text/html; charset = gb2312">
<Estilo type = text/css>
Cuerpo {Font-Size: 14px;
Ol li {margen: 8px}
#con {Font-Size: 12px;
#tags {Right-Right: 0px;
Arriba: 0px;
#tags li {fondo: url (imágenes/tagleft.gif) sin repetición de fondo;
Ninguno;
#tags li a {Padding-right: 10px;
FLOAT: Izquierda;
ninguno}
#tags li.emptytag {fondo: ninguno de los scroll transparente repetir 0% 0%;
#tags li.selecttag {Posición de fondo:
#tags li.selecttag a {Posicionamiento de fondo:
#TagContent {Right-Right: 1px;
1px;
.TagContent {Padding-Right: 10px;
Boothom: 10px;
#tagcontent div.selecttag {display: block}
</style>
<Meta content = "mshtml 6.00.2800.1589" name = Generator> </Head>
<Body>
<Div id = con>
<Ul id = etiquetas>
<Li class = selecttag> <a onMouseOver = "selecttag ('tagContent0', this)" href = "javascript: void (0)"> etiqueta 1 </a> </li>
<li> <a onMouseOver = "selecttag ('tagContent1', this)" href = "javaScript: void (0)"> etiqueta 2 </a> </li>
<li> <a onMouseOver = "selecttag ('tagContent2', this)" href = "javaScript: void (0)"> Etiquetas con ancho adaptativo </a> </li>
<li> <a onMouseOver = "selecttag ('tagContent3', this)" href = "javaScript: void (0)"> ancho adaptativo </a> </li>
</ul>
<Div id = tagContent>
<Div class = tagContent id = TagContent0> Contenido de la primera etiqueta </div>
<Div id = TagContent1> Contenido de la segunda etiqueta </div>
<Div class = tagContent id = tagContent2> Content of the Third Tag </div>
<Div class = tagContent id = TagContent3> Contenido de la cuarta etiqueta </div>
</div>
</div>
<Script type = text/javaScript>
función selecttag (showcontent, selfObj) {
// Etiqueta de operación
var etiqueta = document.getElementById ("etiquetas"). getElementsBytagName ("li");
var tagLength = tag.length;
para (i = 0; i <tagLength; i ++) {
etiqueta [i] .classname = "";
}
SelfoBJ.ParentNode.ClassName = "SELECTTAG";
// Contenido de operación
para (i = 0; j = document.getElementById ("tagContent"+i); i ++) {
J.style.display = "Ninguno";
}
document.getElementById (showcontent) .style.display = "bloque";
}
</script>
</body> </html>