Artikel ini menjelaskan prinsip dan efek implementasi prinsip dan metode switching tab JavaScript. Bagikan untuk referensi Anda.
Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <Html>
<head>
<type style = "text/css">
#container {border: solid 1px green; lebar: 300px; tinggi: 300px;}
Li {float: left; margin-left: 20px;}
p {float: left;}
#sport,#militer,#bbs {display: none;}
</tyle>
<type skrip = "Teks/JavaScript">
tab fungsi (pid) {
var ps = ['berita', 'olahraga', 'militer', 'bbs'];
untuk (var i = 0, len = ps.length; i <len; i ++) {
if (ps [i] == pid) {
document.geteLementById (ps [i]). style.display = "block";
}kalau tidak{
document.geteLementById (ps [i]). style.display = "none";
}
}
}
</script>
</head>
<body>
<Div id = "container">
<ul>
<li onmouseover = "tab ('news');"> News </li>
<li onmouseover = "tab ('sports');"> Sports </li>
<li onmouseover = "tab ('militer');"> Militer </li>
<li onmouseover = "tab ('bbs');"> forum </li>
</ul>
<p id = "News"> News NewsNews News </p>
<P ID = "Olahraga"> Olahraga Olahraga Olahraga Olahraga </p>
<P ID = "Militer"> Militer Militer Militer </p>
<P ID = "BBS"> Forum Forum Forum Forum Forum </p>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.