Cách thực hiện - Tab
Tìm hiểu cách tạo tab bằng CSS và JavaScript.
Tab
Tab hoàn hảo cho các ứng dụng web một trang hoặc cho các trang web có khả năng hiển thị các chủ đề khác nhau:
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.
Tạo các tab có thể chuyển đổi
Bước 1) Thêm HTML:
Ví dụ
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event,
'London')">London</button>
<button class="tablinks" onclick="openCity(event,
'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event,
'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div
id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris
is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
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 */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover
*/
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active
{
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
Bước 3) Thêm JavaScript:
Ví dụ
function openCity(evt, cityName) {
// Declare all
variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent
= document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove
the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i <
tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to
the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
Hãy tự mình thử »Làm mờ dần trong tab:
Nếu bạn muốn làm mờ nội dung tab, hãy thêm CSS sau:
Ví dụ
.tabcontent {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go
from zero to full opacity */
@keyframes fadeEffect {
from
{opacity: 0;}
to {opacity: 1;}
}
Hãy tự mình thử »Hiển thị một tab theo mặc định
Để mở một tab cụ thể khi tải trang, hãy sử dụng JavaScript để "nhấp" vào nút tab được chỉ định:
Ví dụ
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
Hãy tự mình thử »Đóng một tab
Nếu bạn muốn đóng một tab cụ thể, hãy sử dụng JavaScript để ẩn tab đó chỉ bằng một cú nhấp chuột:
Ví dụ
<!-- Click on the <span> element to close the tab -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
<span onclick="this.parentElement.style.display='none'">x</span>
</div>
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem Cách thực hiện - Tab dọc .