Bài viết sau sẽ hướng dẫn bạn sử dụng một chút jQuery, HTML và CSS để tạo ra nội dung dạng Tab (hay Tabbed). Một kiểu show dữ liệu tiết kiệm không gian web và được nhiều website sử dụng. Có một cải tiến đáng lưu ý là ghi nhớ tab được chọn, khi người dùng reload trang sẽ không mất đi trạng thái đang được chọn ở tab đang mở. Sau đây là các bước thực hiện để tạo ra ứng dụng Tabbed nội dung bằng jQuery + HTML + CSS cho Website của bạn.
Đầu tiên ta có đoạn HTML và CSS sử dụng cho tab như sau:
Quote
<div class="tabbed">
<ul class="tabnav">
<li><a href="#tab1">Tab 01</a></li>
<li><a href="#tab2">Tab 02</a></li>
<li><a href="#tab3">Tab 03</a></li>
</ul>
<div class="tabcont">
<div id="tab1" class="tabcontent">Nội dung tab 1 </div>
<div id="tab2" class="tabcontent">Nội dung tab 2</div>
<div id="tab3" class="tabcontent">Nội dung tab 3</div>
</div>
</div>
CSS:
Quote
<style type="text/css">
.tabbed {
padding:30px 0 0;
position:relative;
width:70%;
margin:0 auto;
}
.tabbed .tabcont {
background:#eee;
padding:20px;
}
.tabbed .tabcont .tabcontent {
display:none;
position:relative;
line-height:20px;
}
.tabbed .tabcont .tabcontent img {
max-width:100%;
}
.tabbed .tabcont .tabcontent.active {
display:block;
}
.tabnav {
position: absolute;
left:0;
top:-1px;
width:100%;
border-bottom:1px solid #eee;
}
.tabnav li {
float:left;
}
.tabnav li a {
height:30px;
line-height:30px;
padding:0 14px;
font-size:18px;
font-weight:bold;
border-radius:5px 5px 0 0;
display:block;
color:#333;
}
.tabnav li.active a {
background:#eee;
color:#376405;
}
</style>
Và ta có đoạn Script tạo chức năng tab như sau:
<script type="text/javascript">
$(function(){
$('.tabbed').find('.tabcontent:first').addClass('active');
$('.tabbed').find('.tabnav li:first').addClass('active');
$('.tabbed').find('.tabnav li').each(function(){
$(this).click(function(){
ntab = $(this).find('> a').attr('href');
$(this).parents('.tabbed').find('.active').removeClass('active');
$(this).addClass('active');
$(this).parents('.tabbed').find(ntab).addClass('active');
return false;
});
});
})
</script>
Trong đoạn Script trên, việc xác định Menu và và nội dung được chọn và tạo ra trạng thái active dựa trên việc người dùng click vào menu tab và sau đó dựa trên thuộc tính href của thẻ a mà người dùng vừa click vào.
Tới đây, bạn đã tạo được chức năng tab nội dung. Tuy nhiên, một bất tiện ở đây là khi người dùng click vào 1 tab, nội dung và menu của tab đó đang ở trạng thái active. Nếu người dùng reload trang web lại thì trang thái active đó lại mất đi và trở về với tab active mặc định lúc đầu. Giờ đây yêu cầu là cần phải cho trình duyệt ghi nhớ tab mà người dùng đã click vào, khi reload trang thì trạng thái active vẫn giữ ở tab mà người dùng vừa click. Để thực hiện điều này chúng ta dùng ứng dụng localStorage trong HTML5, và ta có đoạn Script như sau:
Quote
<script type="text/javascript">
$(function(){
if(localStorage.getItem('active'))
{
$('.tabbed').find(localStorage.getItem('active')).addClass('active');
$('.tabbed').find('a[href='+localStorage.getItem('active')+']').parent().addClass('active');
}
else
{
$('.tabbed').find('.tabcontent:first').addClass('active');
$('.tabbed').find('.tabnav li:first').addClass('active');
}
$('.tabbed').find('.tabnav li').each(function(){
$(this).click(function(){
ntab = $(this).find('> a').attr('href');
localStorage.setItem('active', ntab);
$(this).parents('.tabbed').find('.active').removeClass('active');
$(this).addClass('active');
$(this).parents('.tabbed').find(ntab).addClass('active');
return false;
});
});
})
</script>
Ở đoạn mã trên, ta sử dụng localStorage để lưu trữ thông tin active khi người dùng click vào menu tab. Sau đó, gọi ra thông tin này để xác định tab nào đã được người dùng click chọn. Nếu người dùng, chưa click chọn tab nào thì trang thái active sẽ nằm ở vị trí tab active mặc định.
Lưu ý một điều là chức năng localStorage là ứng dụng của HTML5, vì vậy một số trình duyệt đời cũ sẽ không hỗ trợ chức năng này (IE7).
Đến đây, bạn đã có thể tạo cho website của mình một ứng dụng tab nội dung tối ưu mà không cần mất nhiều thời gian và công sức. Bạn có thể tham khảo Demo trên trong bài viết hoặc download file mẫu về máy. Chúc bạn thành công.
