Trong việc thiết kế web thì người thiết kế bao giờ cũng có nhiều sự lựa chọn trong việc trình bày giao diện. Tuy nhiên làm như thế nào cho hợp lý, làm thế nào cho thỏa mãn nhu cầu khách hàng đó là mục đích của chúng ta. Hôm nay mình giới thiệu với các bạn cách tạo jQuery Tabs và tác dụng của nó.

Đối với những ai đã học qua HTML & CSS cũng như từng xem nhiều website thì khá rõ về Tabs là gì rồi. Tabs là một cách trình bày được nhiều thông tin trong cũng một không gian trên trang web. Nó có thể giúp các bạn tiết kiệm được diện tích website và tạo sự chuyên nghiệp, tránh thông tin tràn lang gây khó chịu cho người dùng.

[jQuery] Hướng dẫn tạo jQuery Tabs đơn giản

Cách tạo jQuery Tabs

Tiếp theo bạn khai báo phần HTML cho nó, phần này sẽ tạo nên khung tab cho bạn dựa vào đây bạn biết được cấu trúc tạo nên Tabs và dễ dàng cho việc định dạng và thêm dữ liệu.


  <ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
  </ul>
  <div id='tab1'>
    <p>Hi, this is the first tab.</p>
  </div>
  <div id='tab2'>
    <p>This is the 2nd tab.</p>
  </div>
  <div id='tab3'>
    <p>And this is the 3rd tab.</p>
  </div>

Ở đây bạn có thể dễ dàng nhận thấy được tabs mình sẽ có 3 tabs, mỗi tab sẽ có nhãn lần lượt là Tab 1, Tab 2, Tab 3 và phần trình bài nội dung tương ứng bên dưới.

Import jQuery vào trong file HTML của bạn, download tai http://jquery.com/:


<script src="js/jquery.js"></script>

<script>

$('ul.tabs').each(function(){
  // For each set of tabs, we want to keep track of
  // which tab is active and it's associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  $active.addClass('active');
  $content = $($active.attr('href'));

  // Hide the remaining content
  $links.not($active).each(function () {
    $($(this).attr('href')).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $active.removeClass('active');
    $content.hide();

    // Update the variables with the new link and content
    $active = $(this);
    $content = $($(this).attr('href'));

    // Make the tab active.
    $active.addClass('active');
    $content.show();

    // Prevent the anchor's default click action
    e.preventDefault();
  });
});
</script>

Chúc các bạn thành công!

Nguồn: http://www.jacklmoore.com/notes/jquery-tabs/

  • Jquery
  • August 1, 2013
  • 0 comment
  • 189 views

Recent posts

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft đã gióng lên hồi chuông cảnh báo về Lumma Stealer, một loại mã độc chuyên đánh cắp thông tin, […]

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Một tính năng đột phá vừa được Google chính thức ra mắt trên trình quản lý mật khẩu tích hợp […]

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google bắt dầu triển khai tính năng dịch giọng nói trực tiếp trong cuộc gọi, khẳng định có thể khớp […]

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

Những chiếc iPhone đã sống đủ lâu với ngôi vị quán quân di động, đã đến lúc sẽ có công […]

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

Tạo custom Action Hook trong WordPress là một kỹ năng rất hữu ích để tùy chỉnh và mở rộng chức […]

© 2021 Tạp Chí CNTT. Mr Hoang