Der Code ist ziemlich prägnant und leicht zu verstehen, so dass es keinen Unsinn mehr gibt.
Präsentieren Sie den Code direkt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html" charset = "utf-8">
<title> JS Simple Tab </title>
<script type = "text/javaScript" src = "js/Demo.js"> </script>
<style type = "text/css">
*{Schriftgröße: 14px; Margin: 0px;}
a {color:#a0b3d6; textdekoration: keine;}
.tabs {Grenze: 1px solide #a0b3d6; Rand: 100px; Breite: 350px;}
.tabs-nav a {Hintergrund:#EAF0FD; Zeilenhöhe: 30px; Padding: 0px 20px 0px 20px; Anzeige: Inline-Block; Grenzrechte: 1PX Solid #a0b3d6; Border-Bottom: 1PX Solid #a0b3d6; float: links;}
.tabs-nav .on {Hintergrund: weiß; Grenzboden: 1px Festes Weiß; Position: Relativ;}
.tabs-content {display: block; Polsterung: 20px; Border-Top: 1PX Solid #a0b3d6; Rand: -1px;}
.tabs-content_hide {display: keine;}
</style>
</head>
<body>
<div id = "tabs">
<h2>
<a href = "JavaScript:;"> Home </a>
<a href = "JavaScript:;"> Technologie </a>
<a href = "JavaScript:;"> Leben </a>
<a href = "javaScript:;"> funktioniert </a>
</h2>
<div style = "klare: beides;"> </div>
<p> Home </p>
<p> Technologie </p>
<p> Leben </p>
<p> funktioniert </p>
</div>
</body>
<footer> </footer>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Die Codekopie lautet wie folgt:
window.onload = function () {
Registerkarten ("Registerkarten", "Mouseover");
}
Funktionstabellen (ID, Trigger) {
var tabBtn = document.getElementById (id) .getElementsByTagName ("H2") [0] .GetElementsByTagName ("a");
var tabScontent = document.getElementById (ID) .GetElementsByTagName ("P");
für (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .Index = i;
if (Trigger == 'Mausover') {
tabbtn [i] .onmouseover = function () {
clearClass ();
this.className = "on";
Showcontent (this.Index);
}
}
Funktion ShowContent (n) {
für (var i = 0; i <tabScontent.length; i ++) {
tabScontent [i] .Index = i;
tabScontent [i] .classname = "tabs-content_hide";
}
tabScontent [n] .classname = "tabs-content";
}
Funktion clearClass () {
für (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .classname = "";
}
}
}
}
Ist es sehr einfach, den Switching -Effekt der Registerkarte zu erreichen? Freunde können es in ihren eigenen Projekten verwenden, nachdem sie es verschönert haben.