Demo :
Bảng thông kê diễn đàn dạng tab "đa chức năng"
Demo online: http://codefm1.forumvi.com/


Bước 1 : Cho code sau vào CSS:

Code:

#thai_tab {border-bottom: 1px solid #ccc;}
#stabs {list-style: none;padding: 5px 0 4px 0;margin: 0 0 0 10px;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 13px;}
#stabs li {
  display: inline;}
#stabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#stabs li.active a {
    border-bottom: 1px solid #fff;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#stabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
.hotrofm_tab {
    display: none;
}
#stabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #eeeeee;
    border-bottom: none;
    outline: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
#thai_tab_content {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
}

Bước 2: Vào index_body tìm

Code:

<!-- BEGIN disable_viewonline -->
ĐẾN
....
<!-- END disable_viewonline -->


Xóa nó đi

Và thay bằng code

Code:

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
   
      
                  <div id="thai_tab">
    <ul id="stabs">
        <li class="active"><a href="#tab1">Ai đang trực tuyến</a></li>
        <li><a href="#tab2">Sự kiện</a></li>
        <li><a href="#tab3">Thống kê</a></li>
        <li><a href="#tab4">Liên kết</a></li>
    </ul>
</div>
        <div id="thai_tab_content">
    <div id="tab1" class="hotrofm_tab" style="display: block;">             
      <p>{TOTAL_USERS_ONLINE}
              <br />{LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}</p>
    </div>
    <div id="tab2" class="hotrofm_tab">
<p>{NEWEST_USER}</p>
            <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            <p>{LEGEND} : {GROUP_LEGEND}</p>
    </div>
    <div id="tab3" class="hotrofm_tab">
<p>{RECORD_USERS}
              <br />{TOTAL_POSTS}
              <br />{TOTAL_USERS}</p>
    </div>
<div id="tab4" class="hotrofm_tab">
  <p><img src="http://r14.imgfast.net/users/1416/39/08/64/avatars/gallery/123_bm10.jpg" /></p>
                  </div>       
       </div>   
           
         
        </div> 
     

<!-- END disable_viewonline -->

Bước 3 : Tạo 1 Javascript mới
Title : Bảng thống kê dạng tab
Placement : In the homepage
Code :

Code:

$(document).ready(function(){
 $("#stabs li").click(function() {
 $("#stabs li").removeClass('active');
 $(this).addClass("active");
  $(".hotrofm_tab").hide();
 var selected_tab = $(this).find("a").attr("href");
    $(selected_tab).fadeIn();
        return false;
    });
});

Chú ý nếu các bạn muốn xóa tab bất kỳ thì làm theo các bước
Vào index_body tìm

Code:

<li><a href="#tabsố tab muốn xóa">

Thay số tab mà bạn muốn xóa vào và xóa code đó đi
Tiếp theo tìm

Code:

 <div id="tabsố tab tương ứng" class="hotrofm_tab">

Và xóa đi

Hướng dẫn thêm tab:
VD : thêm tab với code nguyên phía trên vào tìm :

Code:

<li><a href="#tab4">Liên kết</a></li>

và thêm sau nó

Code:

 <li><a href="#tab5">Tên tab</a></li>

Và tìm

Code:

<div id="tab4" class="hotrofm_tab">
  <p><img src="http://r14.imgfast.net/users/1416/39/08/64/avatars/gallery/123_bm10.jpg" /></p>
                  </div>       

thêm sau nó cấu trúc:

Code:

<div id="tab5" class="hotrofm_tab">
  <p>Nội dung</p>
                  </div> 

Thế là xong

cái này share từ lâu lắm rồi

đã share đâu chupy ::> chỉ có thấy nhưng chưa ai share

cái này có lâu rồi + mình cũng từng dùng qua 2 lần

cái này share rồi nè ! của xaydungthanhhoa
code trên cũng cùng style => thay đổi 1 số class => cuối cùng cũng là xaydungthanhhoa ( zualuoi ) share trước nên ko tính tác giả là thớt nhá

Nếu không xác minh được là do bạn viết mình sẽ hủy bài này!

Mình dựa vào đây mà viết nếu biết đã có rồi share làm gì để mang thêm phiền phức
http://stackoverflow.com/questions/3912729/jquery-tabs-selection

Cái này là sao?

Code:

class="hotrofm_tab"

đó chỉ là thay tên class vì em viết cái này ở hotrofm mà
http://www.hotrofm.com/t3445-topic?highlight=Th%E1%BB%91ng+k%C3%AA+t%C3%ACnh+h%C3%ACnh+di%E1%BB%85n+%C4%91%C3%A0n+d%E1%BA%A1ng+tab