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.
Để 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.
Code ở phần CSS đã có một số điều chỉnh so với bản Demo của Fotis Evangelou (Komrade)
Bạn có thể xem Demo dưới đây.
Bài viết
Nhận xé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.
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>
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.<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>