Loading post navigation ...
 
 

Pro page

8
Nhận xét

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

| by Phan Dũng | views

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

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



Enter your mail address:

8

Ngankvn ®

Kỳ này viết nhiều bài theo ko kịp luôn :D , cứ tiếp tục phát huy nhé , Mình ủng hộ hết mình đấy , toàn bài chưa đọc bao giờ !!!

Để khi nào thay temp có nhiều không gian hơn sẽ xài hết mớ Thủ thuật của Fan Dũng :)

fandung-tester

cảm ơn bạn nhiều. Được người khác comment ủng hộ bài viết của mình quả thật là rất vui, nó tạo động lực lớn cho mình. :D

Tuy nhiên hình như blog của mình vẫn chưa được nhiều người biết tới. Mình vẫn luôn lấy blog của bạn làm mục tiêu, có lẽ sẽ không bao giờ bằng nhưng "gần gần" cũng vui rồi. :D

Một lần nữa cảm ơn Kim Ngân đã ủng hộ nhiệt tình.

Toáy

rất hay, thank's

Le

diencg
五島列島
水産加工
牡蠣
きびなご

Khách (ẩn danh)

nhìn mtwj anh dũng như mặt lồn mà chỗ nào cũng mang ra khoe chán nhỉ

MrOxi

anh giải thích rõ ràng hơn dươc k?em không hiểu

tronzo

Minh Coppy ve lam giong nhu vay nhung ben Trinh duyet Eplorer khong chạy duoc. ben Firefox thi chay duoc. ban co the chi cho cach chay ben trinh duyet Eplorer duoc khong. cam on ban nhieu.

Đỗ Minh Triết

Tạo Tabs Với Css3 Cùng Nhiều Hiệu Ứng Đẹp
http://vnminhtriet.blogspot.com/2015/03/tao-tabs-voi-css3-cung-nhieu-hieu-ung-ep.html



☺ 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