Hướng dẫn tạo Tab trong HTML đơn giản năm 2022

Trong bài content này, ATP Web sẽ Hướng dẫn tạo Tab trong HTML đơn giản năm 2022. HIển thị thông tin theo các Tab là một trong những kỹ thuật rất hiệu quả khi Website của bạn có chứa nhiều thông tin ở các thể loại khác nhau, nó cũng rất hữu dụng ngay cả trang của bạn là một trang kinh doanh. Việc vận dụng các Tab nội dung sẽ khiến Web của bạn chuyên môn và lành tính hơn với khách hàng, ta sẽ chỉ hiển thị thông tin mà người dùng chú ý đến.

Hướng dẫn tạo Tab trong HTML đơn giản năm 2022

Xây dựng giao diện

Đầu tiên là bước xây dựng bố cục và giao diện hiển thị, các bạn tạo file index.HTML và tạo các tab và các thẻ chứa nội dung với đoạn mã sau:

<div class=”tab”>
<button class=”tablinks active”>PHP</button>
<button class=”tablinks”>HTML</button>
<button class=”tablinks”>CSS</button>
</div>

<div id=”PHP” class=”tabcontent”>
<h3>PHP</h3>
<p>
PHP (viết tắt hồi quy “PHP: Hypertext Preprocessor”) là một ngôn ngữ lập
trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng
dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất
thích hợp với web và có thể dễ dàng nhúng vào trang HTML..
</p>
</div>

<div id=”HTML” class=”tabcontent”>
<h3>HTML</h3>
<p>
HTML là chữ viết tắt của cụm từ HyperText Markup Language((Xem thêm tại
http://vi.wikipedia.org/wiki/HTML)) (dịch là Ngôn ngữ đánh dấu siêu văn bản)
được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang
và mỗi trang được quy ra là một tài liệu HTML.
</p>
</div>

<div id=”CSS” class=”tabcontent”>
<h3>CSS</h3>
<p>
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để
tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML).
</p>
</div>

PHP (viết tắt hồi quy “PHP: Hypertext Preprocessor”) là một ngôn ngữ lập
trình kịch bản hay một loại mã lệnh chủ yếu được dùng để tăng trưởng các ứng
dụng viết cho máy chủ, mã nguồn mở, sử dụng cho mục đích tổng quát. Nó rất
ăn nhập với Web và có thể dễ dàng nhúng vào trang HTML..
p>
div>

<div id=”HTML” class=”tabcontent”>
<heading 3>HTMLH3>
<p>
HTML là từ viết tắt của cụm từ HyperText Markup Language((Xem thêm tại
http://vi.wikipedia.org/wiki/HTML)) (dịch là Ngôn ngữ đánh dấu siêu văn bản)
được dùng để tạo một Web, trên một Website có khả năng sẽ chứa nhiều trang
và mỗi trang được quy ra là một tài liệu HTML.
p>
div>

<div id=”CSS” class=”tabcontent”>
<H3>CSSheading 3>
<p>
CSS là từ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được dùng để
tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML).
p>
div>

Rất dễ dàng phải không nào, giờ mình sẽ định dạng để nó dễ nhìn hơn nhé! Các bạn dán đoạn code sau vào bên trong thẻ style:

div.container {
width: 60%;
margin: auto;
}
/* định dạng thẻ div chưa các button tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* định dạng các button tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/* đổi màu khi một button tab được hover */
div.tab button:hover {
background-color: #ddd;
}

/* đổi màu nền cho tab đang được hiển thị nội dung */
div.tab button.active {
background-color: #ccc;
}

/* định dạng nội dung hiển thị */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

Tất cả các định dạng đều khá đơn giản, các bạn chỉ cần chú ý đến phần tính chất display: none của các tab thông tin, ban đầu chúng có thể được ẩn đi và có thể được hiển thị khi button tương ứng được click.

Vậy là đã xong phần bố cục và giao diện rồi, chúng ta tiếp tục xây dựng phần xử lí Javascript để hiển thị thông tin thích hợp nhé.

Xử lí thao tác người dùng bằng javascript

Các bạn đặt đoạn script này sau thẻ body nhé:

<script type=”text/javascript”>
var buttons = document.getElementsByClassName(‘tablinks’);
var contents = document.getElementsByClassName(‘tabcontent’);
function showContent(id){
for (var i = 0; i < contents.length; i++) {
contents[i].style.display = ‘none’;
}
var content = document.getElementById(id);
content.style.display = ‘block’;
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener(“click”, function(){
var id = this.textContent;
for (var i = 0; i < buttons.length; i++) {
buttons[i].classList.remove(“active”);
}
this.className += ” active”;
showContent(id);
});
}
showContent(‘PHP’);
</script>

Đầu tiên mình sẽ lấy toàn bộ các button và các thẻ div hiện thị nội dung phụ thuộc vào class.

Tiếp đến mình sẽ khai báo hàm showContent để hiển thị thể div chưa nội dung phụ thuộc vào id được truyền vào, trong hàm này trước hết mình ẩn hết tất cả các thẻ div chứa thông tin, sau đó chỉ hiện thị thẻ chưa nội dung có id được truyền vào hàm.

Sau khi đã có hàm showContent mình tiếp tục gán sự kiện onclick cho toàn bộ các buttons đã lấy ở trên, button nào được click sẽ được thêm class=”active” và gọi hàm showContent với id là nội dung của button đấy.
Cuối cùng với mình gọi hàm showContent với id là PHP để mặc định hiển thị tab PHP.

Vậy là mình đã cùng các bạn xây dựng xong công dụng hiển thị nội dung theo tab với HTML, CSS và Javascript, Hẹn gặp lại các bạn trong cá bài viết sau.

(Nguồn: Tổng hợp)

Lời tổng kết

Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.

ATPWEB – XÂY DỰNG NGÔI NHÀ ONLINE

• Hotline: 0707 6666 56
• Fanpage: ATP Web
• Gmail: info@atpweb.vn
• Website: https://atpweb.vn/