El código es bastante conciso y fácil de entender, por lo que no hay más tonterías.
Presente directamente el código:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta http-oquiv = "content-type" content = "text/html" charset = "utf-8">
<title> js pestaña simple </title>
<script type = "text/javaScript" src = "js/demo.js"> </script>
<style type = "text/css">
*{font-size: 14px; margen: 0px;}
A {Color:#A0B3D6; Decoración de texto: Ninguno;}
.tabs {borde: 1px sólido #a0b3d6; margen: 100px; ancho: 350px;}
.tabs-nav a {fondo:#eaf0fd; Línea-aguja: 30px; relleno: 0px 20px 0px 20px; pantalla: bloque en línea; borde-derecha: 1px sólido #a0b3d6; fondo de borde: 1px sólido #a0b3d6; flotante: izquierda;}
.tabs-nav .on {fondo: blanco; Border-Bottom: 1px de blanco sólido; Posición: relativo;}
.tabs-contento {display: block; relleno: 20px; border-top: 1px sólido #a0b3d6; margen-top: -1px;}
.tabs-content_hide {display: none;}
</style>
</ablo>
<Body>
<div id = "pestañas">
<h2>
<a href = "javaScript :;"> Home </a>
<a href = "javascript :;"> tecnología </a>
<a href = "javascript :;"> vida </a>
<a href = "javascript :;"> funciona </a>
</h2>
<div style = "claro: ambos;"> </div>
<p> home </p>
<p> tecnología </p>
<p> vida </p>
<p> funciona </p>
</div>
</body>
<Tooter> </foTer>
</html>
----------------------------------------------------------------------------------------------------------------------------
La copia del código es la siguiente:
window.onload = function () {
pestañas ("pestañas", "mouseover");
}
pestañas de funciones (id, disparador) {
var tabtn = document.getElementById (id) .getElementsBytagName ("H2") [0] .getElementsBytagName ("A");
var tabScontent = document.getElementById (id) .getElementsBytagName ("P");
para (var i = 0; i <tabtn.length; i ++) {
tabbtn [i] .index = i;
if (Trigger == 'Mouseover') {
tabtn [i] .onmouseover = function () {
ClearClass ();
this.classname = "on";
showcontent (this.index);
}
}
función showcontent (n) {
para (var i = 0; i <tabsContent.length; i ++) {
tabsContent [i] .index = i;
tabsContent [i] .classname = "Tabs-Content_hide";
}
TABSCONTENT [n] .classname = "Tabs-Content";
}
función clearClass () {
para (var i = 0; i <tabtn.length; i ++) {
tabbtn [i] .classname = "";
}
}
}
}
¿Es muy simple lograr el efecto de conmutación de la pestaña? Los amigos pueden usarlo en sus propios proyectos después de embellecerlo.