Loading post navigation ...
 
 

Pro page

5
Nhận xét

Tạo các Tab nội dung

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.


Ở đây mình giới thiệu 3 lọai tab:
A. Lọai 1:
Hình minh họa:


Code:

<style type="text/css">
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{
position: relative;
top: 1px;
}

.shadetabs li a.selected{
background-image: url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li> // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000) // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>


B. Lọai 2:
Hình minh họa:


Code:

.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<ul div id="flowertabs" class="modernbricksmenu2">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li> // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("flowertabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000) // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>


C. Loại 3:
Hình minh họa:


Code:

<style type="text/css">
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg2.gif) center center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}
</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<div id="pettabs" class="indentmenu">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li> // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("pettabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000) // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>


Chúc các bạn thành công.


Enter your mail address:

5

Comedown

Bạn xem lại tab loại 2 (hiển thị sai chổ) và loại 3 (không chạy được) nha.

fandung

thực ra việc code không chạy là do Javascript chứ không phải do code HTML. Muốn cho ổn định tốt nhất bạn down file Javascript về và up lên host của mình.

Về cơ bản 3 style này là 1, nó chỉ khác nhau về cấu trúc của CSS mà thôi.

VT

Dat cai nay o dau day ha anh

Phan Dũng

@VT : đặt ở đâu tùy bạn, vi dụ ở side, footer, trên đầu bài viết...

江俊民

cám ơn bạn, mình đã làm được (loại 1), rất hữu ích! chúc bạn luôn thành công, may mắn!
Cho mình hỏi nếu mình add nó vào từng bài viết, thì có ảnh hưởng tới tốc độ load trang ko vậy? (vì trong code có file js)



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home