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 khu vực đô thị hơn 9 triệu dân.
Paris
Paris là thủ đô của nước Pháp.
Khu vực Paris là một trong những trung tâm dân số lớn nhất ở châu Âu, với hơn 12 triệu dân.
Tokyo
Tokyo là thủ đô của Nhật Bản.
Đây là trung tâm của Khu vực Greater Tokyo và là khu vực đô thị đông dân nhất thế giới.
Điều hướng theo thẻ
Đ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 ("city" 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ị nội dung khác nhau:
Ví 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 theo thẻ:
Ví 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:
Ví 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";
}
Hãy tự mình thử »Giải thích về JavaScript
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 "city" ( display="none" ) và hiển thị phần tử có tên thành phố đã cho ( display="block" );
Tab có thể đóng
London
London là 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:
Ví 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>
Hãy tự mình thử »Tab hiện tại/hoạt động
Để đá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 lớp màu vào liên kết đang hoạt động. Trong ví dụ bên dưới, chúng tôi đã thêm 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ó:
Ví 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";
}
Hãy tự mình thử »Tab dọc
Ví 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>
Hãy tự mình thử »Nội dung tab hoạt hình
Sử dụng bất kỳ lớp w3-animate- nào để làm mờ, thu phóng hoặc trượt trong nội dung tab:
Ví dụ
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Hãy tự mình thử »Thư viện hình ảnh theo thẻ
Bấm vào một hình ảnh:
Ví dụ
<a href="javascript:void(0)" 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> Hãy tự mình thử »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:
