jQuery: Cách tạo các tab nội dung
HTML
Bước 1:
Tạo các tab bằng cách sử dụng phần tử <ul> - <li> như sau:
<ul class="tabs">
<li class="active">Call of Duty</li>
<li>Mortal Combat</li>
<li>Halo</li>
<li>Portal</li>
</ul>
Bước 2:
Tạo nội dung cho các tab:
<div class="tab_container">
<!-- Tab1 -->
<div class="tab_content" id="tab1">
Content Tab1
</div>
<!-- Tab2 -->
<div class="tab_content" id="tab2">
Content Tab2
</div>
<!-- Tab3 -->
<div class="tab_content" id="tab3">
Content Tab3
</div>
<!-- Tab4 -->
<div class="tab_content" id="tab4">
Content Tab4
</div>
</div>
CSS
Bây giờ chúng ta sẽ định dạng lại các tab bằng CSS sao cho dễ nhìn , chúng ta sẽ định dạng đơn giản như sau:
<style>
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
border: 1px solid #999999;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
#container {
width: 600px;
margin: 0 auto;
}
</style>
jQuery
Dùng để thiết lập hoạt động cho tab:
<script>
$(function() {
// Ẩn các phần tử có class là "tab_content".
$(".tab_content").hide();
// Hiện tab đầu tiên (mặc định)
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
// Xóa class="active" khỏi các <li> của ul.tab
$("ul.tabs li").removeClass("active");
// Thêm class="active" vào <li> được click
$(this).addClass("active");
// Ẩn các phần tử có class="tab_content"
$(".tab_content").hide();
// Hiện nội dung của tab tương ứng được click
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>