Bài viết này hướng dẫn cách tạo giao diện tab đơn giản nhưng khiến cho trang web vẫn có thể đọc được khi công cụ trình duyệt tắt chức năng JavaScript.
Phương pháp này liên quan đến việc ẩn và hiện các thành phần sử dụng JavaScript trước khi thực thi tab.
Xem Demo. Bạn hãy thử tắt JavaScript trên công cụ trình duyệt.
Bước 1: Chúng ta cần một lớp CSS để áp dụng cho các thành phần được ẩn.
.hidden {
display: none;
}
Bước 2: Thiết lập JavaScript như bên dưới. Chú ý dòng thứ nhất để hiển thị tab menu, dòng thứ hai ẩn các tiêu đề và dòng cuối cùng thực thi các tab.
$(function() {
$(".tabmenu").removeClass("hidden");
$(".tabs h2").addClass("hidden");
$(".tabs").tabs();
});
Ngoài ra còn có sự hỗ trợ của 2 file javascript là jquery.min.js và jquery-ui.min.js và file jquery-ui.css. Đặt toàn bộ các javascript và css trong phần đầu của trang web (trước thẻ </head> như thế này:
<style type="text/css">
.hidden {
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(".tabmenu").removeClass("hidden");
$(".tabs h2").addClass("hidden");
$(".tabs").tabs();
});
</script>
Bước 3: Cuối cùng là thiết lập HTML, đặt đoạn code bên dưới vào phần thân của trang web, giữa 2 thẻ <body> và </body>. Theo mặc định thì các UI tab sử dụng liệt kê không có thứ tự (ul) với các liên kết neo làm tab và sử dụng các thẻ div tương ứng với nội dung. Liệt kê bắt đầu ẩn đi và sẽ được hiển thị bằng JavaScript và mỗi phần có một tiêu đề mà sẽ được ẩn đi nếu JavaScript được kích hoạt.
<div class="tabs">
<ul class="tabmenu hidden">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div id="tab-1">
<h2>Tab 1</h2>
<p>Nội dung của tab 1</p>
</div>
<div id="tab-2">
<h2>Tab 2</h2>
<p>Nội dung của tab 2</p>
</div>
<div id="tab-3">
<h2>Tab 3</h2>
<p>Nội dung của tab 3</p>
</div>
<div id="tab-4">
<h2>Tab 4</h2>
<p>Nội dung của tab 4</p>
</div>
</div>
Bạn có thể tạo giao diện tab như thế này trên Blogger. Chỉ cần đặt tất cả các phần code trình bày ở trên trong một tiện ích HTML/JavaScript là thành công.
{ 0 comments... read them below or add one }
Post a Comment