O código é bastante conciso e fácil de entender, então não há mais bobagens.
Apresente diretamente o código:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html" charset = "utf-8">
<title> JS Tab simples </title>
<script type = "text/javascript" src = "js/Demo.js"> </script>
<style type = "text/css">
*{font-size: 14px; margem: 0px;}
a {color:#a0b3d6; decoração de texto: nenhum;}
.tabs {borda: 1px Solid #a0b3d6; margem: 100px; largura: 350px;}
.tabs-nav a {background:#eaf0fd; altura da linha: 30px; preenchimento: 0px 20px 0px 20px; Display: Block Inline; direita de borda: 1px Solid #A0B3D6; Border-Bottom: 1px Solid #A0B3D6; Float: Esquerda;}
.tabs-nav .on {background: white; fundo da borda: 1px branco sólido; Posição: relativa;}
.tabs-content {display: block; preenchimento: 20px; border-top: 1px Solid #A0B3D6; Margin-top: -1px;}
.tabs-content_hide {display: nenhum;}
</style>
</head>
<Body>
<div id = "guias">
<H2>
<a href = "javascript :;"> home </a>
<a href = "javascript :;"> tecnologia </a>
<a href = "javascript :;"> vida </a>
<a href = "javascript :;"> funciona </a>
</h2>
<div style = "claro: ambos;"> </div>
<p> Home </p>
<p> Tecnologia </p>
<p> vida </p>
<p> funciona </p>
</div>
</body>
<wower> </dower>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------
A cópia do código é a seguinte:
window.onload = function () {
guias ("guias", "mouseOver");
}
guias de função (id, gatilho) {
var tabbtn = document.getElementById (id) .getElementsByTagName ("h2") [0] .getElementsByTagName ("A");
var tabScontent = document.getElementById (id) .getElementsByTagName ("p");
for (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .index = i;
if (trigger == 'mouseOver') {
tabbtn [i] .onMouseOver = function () {
clearclass ();
this.className = "on";
showContent (this.index);
}
}
Função mostra (n) {
for (var i = 0; i <tabscontent.length; i ++) {
tabscontent [i] .Index = i;
tabscontent [i] .className = "tabs-content_hide";
}
tabscontent [n] .className = "tabs-content";
}
função clearclass () {
for (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .className = "";
}
}
}
}
É muito simples alcançar o efeito de comutação da guia? Os amigos podem usá -lo em seus próprios projetos depois de embelezá -lo.