Hướng dẫn tạo tabs cho website đơn giản bằng HTML, CSS, JavaScript

Phan Thanh
Tháng Năm 25, 2018 Bình luận 1560 Lượt xem

0 Shares

Tab là một form khá phổ biến và quen thuộc với nhiều website. Vậy họ đã tạo ra những kiểu tab đó bằng cách nào? Hôm nay, mình sẽ hướng dẫn cho các bạn cách đơn giản để tạo ra tabs với HTML, CSS và JavaScript.

Để làm được bạn phải biết sơ qua về HTMl, CSS, và JS (javascript).

Bước 1: Tạo giao diện cho tabs bằng HTML và CSS:
Đầu tiên là code HTML. Gồm có 2 layout chính đó là layout cho tab (class: tab-menu) và layout cho nội dung tab (class: content-tab).
Chèn code HTML này trong thẻ <body>:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="tab-menu">
<a class="tab active" id="tabA" onclick="ShowTab('tabA','contentA')">Title A</a>
<a class="tab" id="tabB" onclick="ShowTab('tabB', 'contentB')">Title B</a>
<a class="tab" id="tabC" onclick="ShowTab('tabC','contentC')">Title C</a>
</div>
<div class="content-tab">
<div class="content-tab-item active-tab" id="contentA">
<h2>Content TabA</h2>
</div>
<div class="content-tab-item" id="contentB">
<h2>Content TabB</h2>
</div>
<div class="content-tab-item" id="contentC">
<h2>Content TabB</h2>
</div>
</div>

<a class="tab active" id="tabA" onclick="ShowTab('tabA','contentA')">Title A</a>

<a class="tab" id="tabB" onclick="ShowTab('tabB', 'contentB')">Title B</a>

<a class="tab" id="tabC" onclick="ShowTab('tabC','contentC')">Title C</a>

</div>

<h2>Content TabA</h2>

</div>

<h2>Content TabB</h2>

</div>

<h2>Content TabB</h2>

</div>

Giờ thì style lại cho nó đẹp tí. Chèn code CSS sau vào <head>:

<span style="font-family: 'trebuchet ms' , sans-serif;">* {
  font-family: 'Roboto', sans-serif;
}
.tab-menu {
  margin-top: 20px;
}
.tab {
  padding: 10px 20px;
  background: #304FFE;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
.tab+.tab {
  margin-left: 10px;
}
.active {
  opacity: 0.5;
}
.content-tab-item {
  display: none;
}
.active-tab {
  display: inline-block;
}</span>

<span style="font-family: 'trebuchet ms' , sans-serif;">* {

font-family: 'Roboto', sans-serif;

}

.tab-menu {

margin-top: 20px;

}

.tab {

padding: 10px 20px;

background: #304FFE;

color: #fff;

cursor: pointer;

box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);

}

.tab+.tab {

margin-left: 10px;

}

.active {

opacity: 0.5;

}

.content-tab-item {

display: none;

}

.active-tab {

display: inline-block;

}</span>

Kết quả sẽ được như sau:

Bước 2: Đây là bước quan trọng nhất, đó là viết JS xử lý sự kiện click cho các tab:
Chèn đoạn code JS sau vào thẻ <head> nhớ đặt nó trong thử <script>:

<span style="font-family: 'trebuchet ms' , sans-serif;">
var tabs = document.getElementsByClassName("tab");//Lấy địa chỉ class của tab
var contents = document.getElementsByClassName("content-tab-item"); //Lấy địa chỉ class phần nội dung
//Hàm xử lý sự kiện click cho tab</span>
function ShowTab(tab, content){
  var i;
  var tabs = document.getElementsByClassName("tab");
  var contents = document.getElementsByClassName("content-tab-item");
  var tabclick = document.getElementById(tab);
  var contentsclick = document.getElementById(content);
  for(i = 0; i &lt; tabs.length; i++){
    tabs[i].classList.remove("active");//xoá thuộc tính active của tab
    contents[i].classList.remove("active-tab");//xoá thuộc tính active của content
  }
  tabclick.classList.add("active"); //gán thuộc tính active cho tab được chọn
  contentsclick.classList.add("active-tab");// gán thuộc tính active-tab cho content của tab đc chọn
}

var tabs = document.getElementsByClassName("tab");//Lấy địa chỉ class của tab

var contents = document.getElementsByClassName("content-tab-item"); //Lấy địa chỉ class phần nội dung

//Hàm xử lý sự kiện click cho tab</span>

function ShowTab(tab, content){

var i;

var tabs = document.getElementsByClassName("tab");

var contents = document.getElementsByClassName("content-tab-item");

var tabclick = document.getElementById(tab);

var contentsclick = document.getElementById(content);

for(i = 0; i < tabs.length; i++){

tabs[i].classList.remove("active");//xoá thuộc tính active của tab

contents[i].classList.remove("active-tab");//xoá thuộc tính active của content

}

tabclick.classList.add("active"); //gán thuộc tính active cho tab được chọn

contentsclick.classList.add("active-tab");// gán thuộc tính active-tab cho content của tab đc chọn

}

Và đây là kết quả:

javascript

Các tin khác

Để lại bình luận

Đăng ký theo dõi