Cách thực hiện - Tab di chuột
Tìm hiểu cách thay đổi tab khi di chuột bằng CSS và JavaScript.
Tab di chuột
Di chuyển chuột qua một trong các nút menu để hiển thị nội dung tab:
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 dọc có thể di chuột
Bước 1) Thêm HTML:
Ví dụ
<div class="tab">
<button class="tablinks"
onmouseover="openCity(event,
'London')">London</button>
<button class="tablinks"
onmouseover="openCity(event,
'Paris')">Paris</button>
<button class="tablinks"
onmouseover="openCity(event,
'Tokyo')">Tokyo</button>
</div>
<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 di chuyển chuột qua một nút - nó sẽ mở 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 {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
}
/* Change
background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button"
class */
.tab button.active {
background-color:
#ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: 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 link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem Cách thực hiện - Tab .