Người Viết : ViKiMi Editor

Hướng dẫn sử dụng Bootstrap JS Tab dễ dàng, đơn giản, thuận thiện cho thiết kế Website
Thiết kế Website với nội dung được chứa trong các Tab giúp cho phần thiết kế hiển thị sẽ tiết kiệm được nhiều không gian. Đồng thời, sẽ giúp người dùng dễ dàng xem từng nội dung mà không phải tìm kiếm nó qua lâu trên Website. Thiết kế Website với các Tab mang lại nhiều tiện ích có lẽ do đó mà nó được lựa chọn nhiều. Cùng với thiết kế Menu Danh Mục nội dung cần xem, Thiết kế Tab cũng là một thiết kế rất tối ưu.
Trong các thiết kế thông thường của Bootstrap về Tab, có thể dễ dàng thiết kế được mà không cần tới mã Javascript. Có thể xem một Ví Dụ nhỏ về thiết kế như vậy!

Example : Thiết kế Tab không cần Javascript ( jQuery )
<body> <!---Có Nhiều Nội Dung Hiển Thị---> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#product">Thông Tin SP</a></li> <li><a data-toggle="tab" href="#sale">Nội Dung Sale</a></li> <li><a data-toggle="tab" href="#producer">Nhà Cung Cấp SP</a></li> <li><a data-toggle="tab" href="#couppon">Mã Giảm Giá SP / Couppon</a></li> </ul> <div class="tab-content"> <div id="product" class="tab-pane fade in active"> <h3>THÔNG TIN SẢN PHẨM</h3> <p>Các thông tin chi tiết Sản Phẩm.</p> </div> <div id="sale" class="tab-pane fade"> <h3>BÁN HÀNG GIẢM GIÁ</h3> <p>Thông tin về giảm giá - Chung cho mặt hàng.</p> </div> <div id="producer" class="tab-pane fade"> <h3>NHÀ SẢN XUẤT</h3> <p>Thông tin về Nhà Sản Xuất.</p> </div> <div id="couppon" class="tab-pane fade"> <h3>LẤY MÃ GIẢM GIÁ</h3> <p>Hãy lấy mã giảm giá cho Sản Phẩm - Áp dụng Mã cho chương trình Khuyến mại. Nhân gấp nhiều lần lợi ích.</p> </div> </div> </body>
Ngay tại Ví Dụ này chúng ta thấy những Class : .tab-content ; .tab-pane ; data-toggle=”tab” luôn được đi cùng với nhau để tạo nên thiết kế Tab. Đó là một điều luôn có khi thiết kế Tab và không sử dụng Javascript ( jQuery ).
THIẾT KẾ TAB TOGGLEABLE VỚI JAVASCRIPT ( jQUERY )
A ) Chúng ta có thể dễ dàng tạo một Thiết Kế Tab với sự kết hợp của Javacsript ( jQuery ). Lý do tại sao nhiều người lại chọn Thiết kế với Javascript, là bởi vì có thể thực hiện tuỳ chỉnh nhiều hơn nhờ Javascript.
Vậy làm thế nào để có thể thiết kế Tab với Javascript, thật đơn giản chúng ta chỉ cần dùng tới đoạn mã Javascript:
<script>
$(document).ready(function(){
$(“.nav-tabs a”).click(function(){
$(this).tab(‘show’);
});
});
</script>
Mã CODE đầy đủ :
<body> <!---Có Nhiều Nội Dung Hiển Thị---> <ul class="nav nav-tabs"> <li class="active"> <a href="#product">Thông Tin SP</a> </li> <li> <a href="#sale">Nội Dung Sale</a> </li> <li> <a href="#producer">Nhà Cung Cấp SP</a> </li> <li> <a href="#couppon">Mã Giảm Giá SP / Couppon</a> </li> </ul> <div class="tab-content"> <div id="product" class="tab-pane fade in active"> <h3>THÔNG TIN SẢN PHẨM</h3> <p>Các thông tin chi tiết Sản Phẩm.</p> </div> <div id="sale" class="tab-pane fade"> <h3>BÁN HÀNG GIẢM GIÁ</h3> <p>Thông tin về giảm giá - Chung cho mặt hàng.</p> </div> <div id="producer" class="tab-pane fade"> <h3>NHÀ SẢN XUẤT</h3> <p>Thông tin về Nhà Sản Xuất.</p> </div> <div id="couppon" class="tab-pane fade"> <h3>LẤY MÃ GIẢM GIÁ</h3> <p>Hãy lấy mã giảm giá cho Sản Phẩm - Áp dụng Mã cho chương trình Khuyến mại. Nhân gấp nhiều lần lợi ích.</p> </div> </div> <script> $(document).ready(function(){ $(".nav-tabs a").click(function(){ $(this).tab('show'); }); }); </script> </body>
B ) Trên đây là chúng ta cho phép tất cả các Tab được hiển thị ( Điều này thiết lập cho tất cả các Tab đều có khả năng Show nội dung của nó : khi bạn Click vào một Tab thì nội dung của Tab được hiển thị ). Tuy nhiên trong nhiều trường hợp chúng ta cần chỉ định rõ một Tab cụ thể được hiển thị ( Do yêu cầu thiết kế ).
Chúng ta có những cách làm :
+ Lựa chọn tất cả Tab
$(‘.nav-tabs a’).click(function(){
$(this).tab(‘show’);
})
+ Chọn một Tab hiển thị theo id
$(‘.nav-tabs a[href=”#home”]’).tab(‘show’)
+ Chọn một Tab hiển thị là Tab đầu tiên
$(‘.nav-tabs a:first’).tab(‘show’)
+ Chọn một Tab hiển thị là Tab cuối cùng
$(‘.nav-tabs a:last’).tab(‘show’)
+ Chọn một Tab hiển thị là Tab thứ 2 & tương tự cho các vị trí Tab khác nhau
$(‘.nav-tabs li:eq(2) a’).tab(‘show’)
C ) Thực hiện lấy thông tin 1 Tab đang Active
Và Thông tin Tab trước đó được người dùng xem
Thật đơn giản để làm việc này. Chỉ cần thêm một đoạn mã Javascript (jQuery) để lấy thông tin cần thiết.

<script>
$(document).ready(function(){
/** etc… **/
$(‘.nav-tabs a’).on(‘shown.bs.tab’, function(event){
var activeTab = $(event.target).text(); // active tab
var previousTab = $(event.relatedTarget).text(); // previous tab
$(“.act span”).text(activeTab);
$(“.prev span”).text(previousTab);
});
});
</script>
Mã CODE đầy đủ :
<body>
<!---Có Nhiều Nội Dung Hiển Thị--->
<ul class="nav nav-tabs">
<li class="active"> <a href="#product">Thông Tin SP</a> </li>
<li> <a href="#sale">Nội Dung Sale</a> </li>
<li> <a href="#producer">Nhà Cung Cấp SP</a> </li>
<li> <a href="#couppon">Mã Giảm Giá SP / Couppon</a> </li>
</ul>
<div class="tab-content">
<div id="product" class="tab-pane fade in active">
<h3>THÔNG TIN SẢN PHẨM</h3>
<p>Các thông tin chi tiết Sản Phẩm.</p>
</div>
<div id="sale" class="tab-pane fade">
<h3>BÁN HÀNG GIẢM GIÁ</h3>
<p>Thông tin về giảm giá - Chung cho mặt hàng.</p>
</div>
<div id="producer" class="tab-pane fade">
<h3>NHÀ SẢN XUẤT</h3>
<p>Thông tin về Nhà Sản Xuất.</p>
</div>
<div id="couppon" class="tab-pane fade">
<h3>LẤY MÃ GIẢM GIÁ</h3>
<p>Hãy lấy mã giảm giá cho Sản Phẩm - Áp dụng Mã cho chương trình Khuyến mại. Nhân gấp nhiều lần lợi ích.</p>
</div>
</div>
<!--- Phần hiển thị thông tin AcTive Tab & Previous Tab --->
<hr>
<p class="act"><b>Active Tab</b>: <span></span></p>
<p class="prev"><b>Previous Tab</b>: <span></span></p>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(event){
var activeTab = $(event.target).text(); // active tab
var previousTab = $(event.relatedTarget).text(); // previous tab
$(".act span").text(activeTab);
$(".prev span").text(previousTab);
});
});
</script>
</body>
LƯU Ý : ĐỂ LẤY THÔNG TIN ACTIVE TAB & PREVIOUS TAB CHÚNG TA SỬ DỤNG JAVASCRIPT EVENT LÀ ‘shown.bs.tab’ . KHI EVENT NÀY XẢY RA THÌ SẼ LẤY VỀ CÁC THÔNG TIN CẦN THIẾT LẬP
Chúng ta sẽ có những Tab Events có thể vận dụng :
+ show.bs.tab : Phát Sinh khi 1 tab chuẩn bị được hiển thị.
+ shown.bs.tab : Phát Sinh khi 1 tab được hiển thị đầy đủ.
+ hide.bs.tab : Phát Sinh khi 1 tab chuẩn bị được ẩn đi.
+ hidden.bs.tab : Phát Sinh khi 1 tab được ẩn đi hoàn toàn.