Tạo tab nội dung với CSS

Trang chủ » CSS » Thu Thuat Blog » Thủ thuật Blogger » Bạn đang xem:

Tạo tab nội dung với CSS

Thứ Bảy, 9 tháng 5, 2009

[FD's BlOg] - Bài viết trước mình có giới thiệu cho các về thủ thuật tạo tab nội dung với javascript. Bài viết này sẽ hướng dẫn các bạn tạo các tab chỉ với CSS. Ưu điểm của thủ thuật này so với dùng javascript là nó không làm chậm tốc độ load trang như dùng Java.

Xem demo trực tiếp ở đây: http://fandung.110mb.com/CSS-tab/tab_menu.html

Xem hình minh họa :

☼ Đầu tiên chèn đọan code CSS này vào template của blog.
1. Đăng nhập blog
2. Vào bố cục(Layout)
3. Vào chỉnh sửa code HTML (Edit code HTML)
4. Chèn đọan code CSS bên dưới vào trên dòng ]]></b:skin>

html{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bar a{
padding:4px 6px;
background:#E0E9FE;
text-decoration:none;
font-weight:bold;
}
#bar a:hover{
color:#003366;
}
#container{
background:#E0E9FE;
padding:10px;
}
div.maintab div {
display: none
}
div.maintab div:target {
display: block
}

5. Save template.
6. Tạo Widget HTML/Javascript và chèn code HTML bên dưới vào:

<div id="bar">
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
<a href="#tab4">Tab 4</a>
</div>

<div id="container">
<div class="maintab">

<div id="tab1">
Tab 1 Content
</div>

<div id="tab2">
Tab 2 Content
</div>

<div id="tab3">
Tab 3 Content
</div>

<div id="tab4">
Tab 4 Content
</div>
</div>
</div>

7. Save lại là xong.

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

Copy bài viết: