• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

2
31/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)

{2 bình luậnAdd yours ?}

13:14:00, 26 thg 2, 2011

Anh Hà ơi, sao bài viết của anh , em click chọn sang CSS với HTML ko đc?

Reply
08:51:00, 2 thg 5, 2012

mình k thực được nó báo lỗi như sau: Lỗi khi phân tích cú pháp XML, dòng 562, cột 101: The element type "head" must be terminated by the matching end-tag "".

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn