Kode ini cukup ringkas dan mudah dimengerti, jadi tidak ada lagi omong kosong.
Sajikan Kode Langsung:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten-tipe" content = "text/html" charset = "UTF-8">
<title> JS Simple Tab </iteme>
<type skrip = "Text/JavaScript" src = "js/demo.js"> </script>
<type style = "text/css">
*{font-size: 14px; margin: 0px;}
A {Color:#A0B3D6; Text-Decoration: None;}
.tabs {border: 1px solid #a0b3d6; margin: 100px; lebar: 350px;}
.tabs-nav a {latar belakang:#eaf0fd; Line-Height: 30px; Padding: 0px 20px 0px 20px; Tampilan: inline-block; Border-Right: 1px Solid #A0B3D6; Border-Bottom: 1px Solid #A0B3D6; float: kiri;}
.tabs-nav .on {latar belakang: putih; Border-Bottom: 1px solid white; Posisi: relatif;}
.tabs-content {display: block; padding: 20px; border-top: 1px solid #a0b3d6; margin-top: -1px;}
.tabs-content_hide {display: none;}
</tyle>
</head>
<body>
<Div id = "tab">
<h2>
<a href = "javascript:;"> home </a>
<a href = "javascript:;"> Teknologi </a>
<a href = "javascript:;"> hidup </a>
<a href = "javascript:;"> bekerja </a>
</h2>
<Div style = "Clear: keduanya;"> </div>
<p> Rumah </p>
<p> Teknologi </p>
<p> Kehidupan </p>
<p> Bekerja </p>
</div>
</body>
<footer> </footer>
</html>
-----------------------------------------------------------------------------------------------------------------------------
Salinan kode adalah sebagai berikut:
window.onload = function () {
tab ("tab", "mouseover");
}
tab fungsi (id, pemicu) {
var tabbtn = document.geteLementById (id) .geteLementsByTagname ("h2") [0] .geteLementsByTagname ("a");
var tabscontent = document.getElementById (id) .geteLementsByTagname ("p");
untuk (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .index = i;
if (pemicu == 'mouseover') {
tabbtn [i] .onmouseover = function () {
clearclass ();
this.classname = "on";
ShowContent (this.index);
}
}
function showContent (n) {
untuk (var i = 0; i <tabscontent.length; i ++) {
tabscontent [i] .index = i;
tabscontent [i] .className = "tabs-content_hide";
}
tabscontent [n] .className = "tab-content";
}
fungsi clearclass () {
untuk (var i = 0; i <tabbtn.length; i ++) {
tabbtn [i] .className = "";
}
}
}
}
Apakah sangat mudah untuk mencapai efek switching tab? Teman dapat menggunakannya dalam proyek mereka sendiri setelah mempercantiknya.