CÁCH THỰC HIỆN - Các tab
Tìm hiểu cách tạo tab bằng CSS và JavaScript.
Các tab
Tab hoàn hảo cho các ứng dụng web trang đơn hoặc cho các trang web có khả năng hiển thị các chủ đề khác nhau:
London
Luân Đôn là thành phố thủ đô của nước Anh.
Tạo các tab có thể chuyển đổi
Bước 1) Thêm HTML:
Thí 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> với class="tabcontent"đều bị ẩn theo mặc định (với CSS & JS). Khi người dùng nhấp 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:
Thí 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:
Thí 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";
}
Làm mờ trong các tab:
Nếu bạn muốn làm mờ nội dung tab, hãy thêm CSS sau:
Thí dụ
.tabcontent {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go
from zero to full opacity */
@keyframes fadeEffect {
from
{opacity: 0;}
to {opacity: 1;}
}
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:
Thí 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>
Đóng một tab
Nếu bạn muốn đóng một tab cụ thể, hãy sử dụng JavaScript để ẩn tab bằng một lần nhấp vào nút:
Thí 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>
Mẹo: Cũng xem Cách thực hiện - Tab dọc .