Cách THỰC HIỆN - Tab Toàn Trang
Tìm hiểu cách tạo các tab trang đầy đủ, bao phủ toàn bộ cửa sổ trình duyệt, bằng CSS và JavaScript.
Các tab toàn trang
Nhấp vào các liên kết để hiển thị trang "hiện tại":
Tin tức
Một số tin tức trong ngày đẹp trời này!
Tạo các tab một trang
Bước 1) Thêm HTML:
Thí dụ
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')"
id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact',
this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About',
this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home
is where the heart is..</p>
</div>
<div id="News" class="tabcontent">
<h3>News</h3>
<p>Some news this fine day!</p>
</div>
<div
id="Contact" class="tabcontent">
<h3>Contact</h3>
<p>Get
in touch, or swing by for a cup of coffee.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</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 liên kết và nội dung tab (toàn trang):
Thí dụ
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add
height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home
{background-color: red;}
#News {background-color: green;}
#Contact
{background-color: blue;}
#About {background-color: orange;}
Bước 3) Thêm JavaScript:
Thí dụ
function
openPage(pageName, elmnt, color) {
// Hide all
elements with class="tabcontent" by default */
var i,
tabcontent, tablinks;
tabcontent =
document.getElementsByClassName("tabcontent");
for (i =
0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
document.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen"
and click on it
document.getElementById("defaultOpen").click();
Mẹo: Ngoài ra, hãy xem Cách thực hiện - Các tab .