บทความนี้อธิบายถึงวิธีการใช้เอฟเฟกต์การสลับเมนู TAB โดย JS+CSS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
index.css มีดังนี้:
คัดลอกรหัสดังนี้:* {
มาร์จิ้น: 0px;
Padding: 0px;
-
ร่างกาย {
ความกว้าง: 600px;
มาร์จิ้น: 0 อัตโนมัติ;
พื้นหลังสี: เงิน;
-
#Contanier {
พื้นหลังสี: สีเหลือง;
ความกว้าง: 600px; ความสูง: 400px;
-
#tabnavi {
ความกว้าง: 600px; ความสูง: 30px;
พื้นหลังสี: #00BFFF;
การตกแต่งข้อความ: ไม่มี;
ประเภทรายการประเภท: ไม่มี;
-
#tabnavi li {
ลอย: ซ้าย;
มาร์จิ้น-ขวา: 7px;
พื้นหลังสี: #008b8b;
สี: สีขาว;
เคอร์เซอร์: ตัวชี้;
ความกว้าง: 60px;
ความสูง: 28px;
ระดับความสูง: 30px;
TEXT-ALIGN: CENTER;
-
#เนื้อหา {
ความกว้าง: 600px; ความสูง: 370px;
พื้นหลังสี: สีขาว;
-
index.html มีดังนี้:
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> JS ตระหนักถึงเอฟเฟกต์การสลับแบบไดนามิกของเมนูแท็บ </title>
<link href = "css /index.css" rel = "stylesheet" />>>> >>
<script type = "text/javascript">
ฟังก์ชันเจล (id) {
ส่งคืน document.getElementById (id);
-
var arr = [
{"title": "ข่าว", "เนื้อหา": "นี่คือช่องข่าว"},
{"title": "การเงิน", "เนื้อหา": "นี่คือช่องทางการเงิน"},
{"title": "ความบันเทิง", "เนื้อหา": "นี่คือช่องทางบันเทิง"},
{"title": "Sports", "เนื้อหา": "นี่คือช่องกีฬา"}
{"title": "Car", "เนื้อหา": "นี่คือช่องทางรถยนต์"}
{"title": "วิดีโอ", "เนื้อหา": "นี่คือช่องวิดีโอ"},
{"title": "ชีวิต", "เนื้อหา": "นี่คือช่องทางชีวิต"}
-
window.onload = function () {
สำหรับ (var i = 0; i <arr.length; i ++) {
var linew = document.createElement ("li");
linew.innerhtml = arr [i] .title;
เจล ("Tabnavi"). AppendChild (linew);
// bind คลิกเหตุการณ์บน LIs เหล่านี้ดังนั้นคุณต้องกำหนดคุณสมบัติให้กับแต่ละรายการ (ควร ID)
linew.setAttribute ("id", i);
linew.onclick = function () {
var navs = gel ("tabnavi"). ChildNodes;
// ล้างสีทั้งหมด
สำหรับ (var j = 0; j <navs.length; j ++) {
if (navs [j] .nodeType == 1) {
navs [j] .style.backgroundColor = "#008b8b";
-
-
this.style.backgroundColor = "สีแดง";
gel ("เนื้อหา"). innerhtml = arr [this.id] .content;
-
-
-
</script>
</head>
<body>
<div id = "contanier">
<ul id = "tabnavi"> </ul>
<div id = "เนื้อหา"> </div>
</div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน