Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
Tuesday, January 4, 2011

(ChipKool)-Đâ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:
[tab1.bmp]
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> // lnhclass="selected" để thiết lp Tab nào đuc chn mc định hin 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 thi gian t chuyn sang tab (ms), đây là 2s, nếu không mun thì để trng

</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 thi gian t chuyn sang tab (ms), đây là 2s, nếu không mun thì để trng

</script>

Theo Fandung.

0 comments:

Post a Comment

domain, domain name, premium domain name for sales

Popular Posts