Tạo menu dạng tab với SimpleTabs

SimpleTabs là một script do Fotis Evangelou phát triển với những tính năng đáng chú ý sau đây: không phụ thuộc vào thư viện bên thứ ba như jQuery, Mootools… Điều đó có nghĩa là nó sẽ không xung đột với các script khác có sử dụng những thư viện nói trên; nó cũng không cần ID khác hay phần chứa tab để tạo ra nhiều bộ tab khác nhau, vì thế bạn có thể sử dụng nhiều tab dùng SimpleTabs trên cùng một trang web; và một đặc tính khác là sử dụng đơn giản với tốc độ tải trang nhanh, hoạt động tốt trên mọi công cụ trình duyệt.

Bạn có thể xem Demo dưới đây.

• Bài viết mới nhất
• Bài viết ngẫu nhiên
• Thống kê

Bài viết
Nhận xét

Để tạo tab như vậy cho website/blogspot của mình, bạn hãy thực hiện theo các bước cài đặt lần lượt Script >> CSS >> HTML.

• Script
• CSS
• HTML

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script src="http://hacodeproject.googlecode.com/files/simpletabs_1.3.js" type="text/javascript"/></script>

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<style type='text/css'>
div.simpleTabs {padding:10px; }
ul.simpleTabsNavigation {margin:0 10px; padding:0; text-align:left; }
ul.simpleTabsNavigation li {list-style:none; display:inline; margin:0; padding:0;background:#ffffff; }
ul.simpleTabsNavigation li a {border:1px solid #E0E0E0; padding:3px 6px; background:#F0F0F0; font-size:14px; text-decoration:none; font-family:Arial, "Times New Roman", Times, serif;background:none !important; }
ul.simpleTabsNavigation li a:hover {text-decoration:none; background-color:#F6F6F6; font-family:Arial, "Times New Roman", Times, serif; }
ul.simpleTabsNavigation li a.current {background:#fff; color:#222; border-top:2px solid #990000; }
div.simpleTabsContent {background:#ffffff;border:2px solid #E0E0E0; padding:5px 15px 15px 15px; margin-top:3px; display:none; }
div.simpleTabsContent.currentTab {display:block; }
</style>

Bước 3. Thiết lập cấu trúc HTML như sau.

<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="javascript:void(0);">Tiêu đề tab 1</a></li>
<li><a href="javascript:void(0);">Tiêu đề tab 2</a></li>
<li><a href="javascript:void(0);">Tiêu đề tab 3</a></li>
</ul>
<div class="simpleTabsContent">Nội dung Tab 1</div>
<div class="simpleTabsContent">Nội dung Tab 2</div>
<div class="simpleTabsContent">Nội dung Tab 3</div>
</div>

Bạn có thể lần lượt thêm Tab và nội dung tương ứng cho Tab theo đúng định dạng như trên.

Code ở phần CSS đã có một số điều chỉnh so với bản Demo của Fotis Evangelou (Komrade)