Tạo menu dạng tab với SimpleTabs | Blog Trần Phúc Minh | Blog thông tin tổng hợp của huyện Châu Đức

Trang chủ » Tab » Bạn đang xem:

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

Thứ Năm, 30 tháng 12, 2010

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

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)
Copy bài viết:

Tăng cỡ chữ

Giảm cỡ chữ

Bài gốc:
https://yogaso1.blogspot.com/2010/12/tao-menu-dang-tab-voi-simpletabs.html?m=0

Từ khóa
Tab

Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.

Xin chào các bạn ghé thăm trang Trần Phúc Minh, mong các bạn có nhận xét góp ý cho trang này

Tổng số Bình luận [ 0]

Đăng nhận xét