Tab điều hướng W3.CSS
London
London là thủ đô của nước Anh.
Đây là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 9 triệu dân.
Điều hướng theo tab
Điều hướng theo thẻ là một cách để điều hướng xung quanh một trang web.
Thông thường, điều hướng theo tab sử dụng các nút điều hướng (tab) được sắp xếp cùng với tab đã chọn được đánh dấu.
Ví dụ này sử dụng các phần tử có cùng tên lớp ("thành phố" trong ví dụ của chúng tôi) và thay đổi kiểu giữa display: none và display: block để ẩn và hiển thị các nội dung khác nhau:
Thí dụ
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
Và một số nút có thể nhấp để mở nội dung được gắn thẻ:
Thí dụ
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
Và một JavaScript để thực hiện công việc:
Thí dụ
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
JavaScript được giải thích
Hàm openCity () được gọi khi người dùng nhấp vào một trong các nút trong menu.
Hàm ẩn tất cả các phần tử có tên lớp là "city" ( display = "none" ) và hiển thị phần tử có tên thành phố đã cho ( display = "block" );
Các tab có thể đóng lại
London
Luân Đôn là thành phố thủ đô của nước Anh.
Để đóng một tab, hãy thêm onclick = "this.parentElement.style.display = 'none'" vào một phần tử bên trong vùng chứa tab:
Thí dụ
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
Tab Hoạt động / Hiện tại
Để đánh dấu tab / trang hiện tại mà người dùng đang truy cập, hãy sử dụng JavaScript và thêm một lớp màu vào liên kết đang hoạt động. Trong ví dụ dưới đây, chúng tôi đã thêm một lớp "tablink" vào mỗi liên kết. Bằng cách đó, thật dễ dàng để có được tất cả các liên kết được liên kết với các tab và cung cấp cho liên kết tab hiện tại một lớp "w3-red", để làm nổi bật nó:
Thí dụ
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
Tab dọc
Thí dụ
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
Nội dung tab hoạt hình
Sử dụng bất kỳ lớp w3-animate- nào để làm mờ dần, thu phóng hoặc trượt trong nội dung tab:
Thí dụ
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Thư viện hình ảnh theo thẻ
Bấm vào một hình ảnh:
Thí dụ
<a href="#" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div>
Các tab trong lưới
Sử dụng các tab trong bố cục cột thứ ba. Lưu ý rằng chúng tôi thêm đường viền dưới cùng vào tab đang hoạt động, thay vì màu nền: