ในการสร้างส่วนหัวของแท็บด้วย CSS และ JavaScript โค้ดจะเป็นดังนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tablink {
background-color: black;
color: white;
float: left;
cursor: pointer;
padding: 20px 12px;
font-size: 15px;
width: 33.3%;
}
.tablink:hover {
background-color: black;
}
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
#date {
background-color:blue;
border: 1px solid black;
}
#time {
background-color:yellow;
color: black;
border: 1px solid black;
}
#venue {
background-color:orange;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Match Schedule</h2>
<div id="date" class="tabcontent">
<h1>Date</h1>
<p>Match will held on 2nd April.</p>
</div>
<div id="time" class="tabcontent">
<h1>Time</h1>
<p>Begins: 9AM</p>
</div>
<div id="venue" class="tabcontent">
<h1>Venue</h1>
<p>MCG, Australia</p>
</div>
<button class="tablink" onclick="demo('date', this, 'red')" id="defaultOpen">Date</button>
<button class="tablink" onclick="demo('time', this, 'green')">Time</button>
<button class="tablink" onclick="demo('venue', this, 'blue')">Venue</button>
<script>
function demo(match,e,color) {
var i, content, links;
content = document.getElementsByClassName("tabcontent");
var len1 = content.length;
for (i = 0; i < len1; i++) {
content[i].style.display = "none";
}
links = document.getElementsByClassName("tablink");
var len2 = links.length;
for (i = 0; i < len2; i++) {
links[i].style.backgroundColor = "";
}
document.getElementById(match).style.display = "block";
e.style.backgroundColor = color;
}
document.getElementById("defaultOpen").click();
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ตอนนี้ คลิกที่แท็บใดก็ได้ -
