Diễn đàn Tuổi trẻ Việt Nam | 2TVN Forum :: Khám phá tri thức :: Máy tính & Internet :: Thiết kế website
Tuoitrevn
Sử giả 2T
Ghi danh : 03/07/2014
Bài viết : 2127
Kinh nghiệm : 102244
Được thích : 10650
Ý thức : Tốt
Bảng thông kê diễn đàn dạng tab "đa chức năng"
Demo online: Code https://tuoitres.forumvi.com/ dựa trên nguyên lí của Lasttopic ...
Hướng dẫn :
Bước 1 : Cho code sau vào CSS:
Bước 2: Vào index_body tìm:
Xóa nó đi
Và thay bằng code:
Bước 3 : Tạo 1 Javascript mới:
Thay số tab mà bạn muốn xóa vào và xóa code đó đi
Tiếp theo tìm:
Và thêm sau nó:
Và tìm
Thêm sau nó cấu trúc:
Thế là xong ... rùi nhé !!!
Demo online: Code https://tuoitres.forumvi.com/ dựa trên nguyên lí của Lasttopic ...
Hướng dẫn :
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 -->[size=15][/size]
ĐẾN[size=15][/size]
....[size=15][/size]
<!-- 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:
$(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:
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:
<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 ... rùi nhé !!!
Nguồn: Lê Thanh Tùng
Tuoitrevn
Sử giả 2T Ghi danh : 03/07/2014
Bài viết : 2127
Kinh nghiệm : 102244
Được thích : 10650
Ý thức : Tốt
zzzzzzzzzzzzzzzzz
Kelvin999
Thành viên ảo
Ghi danh : 12/07/2015
Bài viết : 0
Kinh nghiệm : 3224
Được thích : 16
Ý thức : Tốt
asfsafsaf