Cách thực hiện - Tiêu đề tab
Tìm hiểu cách tạo tiêu đề tab bằng CSS và JavaScript.
Tiêu đề tab
Nhấp vào nút "thành phố" để hiển thị tiêu đề thích hợp:
London
London là thủ đô của nước Anh.
Paris
Paris là thủ đô của nước Pháp.
Tokyo
Tokyo là thủ đô của Nhật Bản.
Oslo
Oslo là thủ đô của Na Uy.
Tạo tiêu đề tab có thể chuyển đổi
Bước 1) Thêm HTML:
Ví dụ
<div id="London" class="tabcontent">
<h1>London</h1>
<p>London is the
capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h1>Paris</h1>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h1>Tokyo</h1>
<p>Tokyo is the
capital of Japan.</p>
</div>
<div id="Oslo" class="tabcontent">
<h1>Oslo</h1>
<p>Oslo is the capital of Norway.</p>
</div>
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this,
'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo',
this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo',
this, 'orange')">Oslo</button>
Tạo các nút để mở nội dung tab cụ thể. Tất cả các phần tử <div> có class="tabcontent"
đều bị ẩn theo mặc định (với CSS & JS). Khi người dùng nhấn vào một nút - nó sẽ mở ra nội dung tab "khớp" với nút này.
Bước 2) Thêm CSS:
Tạo kiểu cho các nút và nội dung tab:
Ví dụ
/* Style the tab buttons */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
/* Change background color of buttons on hover */
.tablink:hover {
background-color: #777;
}
/* Set default styles for tab content */
.tabcontent
{
color: white;
display: none;
padding: 50px;
text-align: center;
}
/* Style
each tab content individually */
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}
Bước 3) Thêm JavaScript:
Ví dụ
function openCity(cityName, elmnt, color) {
// Hide all
elements with class="tabcontent" by default */
var i,
tabcontent, tablinks;
tabcontent =
document.getElementsByClassName("tabcontent");
for (i =
0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
document.getElementById(cityName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen"
and click on it
document.getElementById("defaultOpen").click();
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem Cách thực hiện - Tab .