Artikel ini menjelaskan metode mengimplementasikan efek switching menu tab oleh JS+CSS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
index.css adalah sebagai berikut:
Salin kode sebagai berikut:* {
margin: 0px;
padding: 0px;
}
tubuh {
Lebar: 600px;
margin: 0 otomatis;
latar belakang-warna: perak;
}
#contanier {
Latar Belakang-Color: Kuning;
Lebar: 600px; Tinggi: 400px;
}
#tabnavi {
Lebar: 600px; Tinggi: 30px;
latar belakang-warna: #00bfff;
Dekorasi Teks: Tidak Ada;
Daftar-gaya-tipe: tidak ada;
}
#tabnavi li {
float: kiri;
margin-kanan: 7px;
latar belakang-warna: #008b8b;
Warna: Putih;
kursor: pointer;
Lebar: 60px;
Tinggi: 28px;
Line-Height: 30px;
Teks-Align: tengah;
}
#isi {
Lebar: 600px; Tinggi: 370px;
Latar Belakang: Putih;
}
Index.html adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/>
<Title> JS menyadari efek switching dinamis dari menu tab </iteme>
<tautan href = "css /index.css" rel = "stylesheet" />
<type skrip = "Teks/JavaScript">
fungsi gel (id) {
return document.getElementById (id);
}
var arr = [
{"judul": "berita", "konten": "Ini adalah saluran berita"},
{"title": "finansial", "konten": "Ini adalah saluran keuangan"},
{"judul": "hiburan", "konten": "Ini adalah saluran hiburan"},
{"judul": "sport", "konten": "Ini adalah saluran olahraga"},
{"judul": "mobil", "konten": "ini saluran mobil"},
{"judul": "video", "konten": "Ini adalah saluran video"},
{"title": "Life", "Content": "Ini adalah saluran hidup"}
];
window.onload = function () {
untuk (var i = 0; i <arr.length; i ++) {
var linew = document.createelement ("li");
linew.innerhtml = arr [i] .title;
gel ("tabnavi"). AppendChild (linew);
// Bind klik peristiwa pada LIS ini, jadi Anda perlu menetapkan properti untuk masing -masing (lebih disukai ID)
linew.setAttribute ("id", i);
linew.onClick = function () {
var navs = gel ("tabnavi"). Childnodes;
// Bersihkan semua warna
untuk (var j = 0; j <navs.length; j ++) {
if (navs [j] .nodetype == 1) {
navs [j] .style.backgroundColor = "#008b8b";
}
}
this.style.backgroundColor = "red";
gel ("konten"). innerhtml = arr [this.id] .content;
};
}
};
</script>
</head>
<body>
<Div id = "contanier">
<ul id = "tabnavi"> </ul>
<Div id = "Content"> </Div>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.