Thủ thuật tạo các tab nội dung

Ngày Thứ Ba, 13 tháng 9, 2011 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Thủ thuật tạo các tab nội dung
Chúc bạn xem tin tức vui vẻ !!

Đâ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 Chip giới thiệu với các bạn 2 lọai tab:

<>Loại 1:

Hình minh họa:

Các bạn copy đoạn code sau rồi dán vào thẻ Html/Javarscript na.

<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ệnhclass="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>

<> Loại 2:
Hình minh họa:



Code:

<style type="text/css">

.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>

<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>

Theo Fandung.