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.
Tab toàn trang
Bấm vào các liên kết để hiển thị trang "hiện tại":
Trang chủ
Nhà là nơi có trái tim..
Tin tức
Một số tin tức trong ngày đẹp trời này!
Liên hệ
Hãy liên lạc hoặc ghé qua để uống một tách cà phê.
Về
Chúng tôi là ai và những gì chúng tôi làm.
Tạo tab một trang
Bước 1) Thêm HTML:
Ví 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> có class="tabcontent"
đều bị ẩn theo mặc định (với CSS & JS). Khi người dùng nhấn 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):
Ví 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:
Ví 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();
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem Cách thực hiện - Tab .