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

4 Th1

(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”&gt;

</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”&gt;

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

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: