Đưa Skin mới vào diễn đàn sử dụng ! Nếu quá trình sử dụng diễn đàn xảy ra lỗi, xin vui lòng liên hệ Admin để báo lỗi ! Cảm ơn !

You are not connected. Please login or register

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

  • Please log in to post a topic
  • Quý Ròm

    Quý Ròm

    Group: Administrator

    Hiện đang:
    Bài viết : 3744
    Points : 11230
    Birthday : 21/02/1991
    Thanks : 4729
    Đến từ : Hà Nội

    Administrator
    Xem lý lịch thành viên

    Administrator
    Bài viết thứ :1

    Đăng vào:on 27/3/2014, 01:54

    Administrator

    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.

    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.

    Code:
    <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.

    Tiếp theo chèn JQuery vào dưới thẻ </head> của bạn
    Code:

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.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'));
     
     // Bài viết không bị Ẩn the remaining content
      $links.not($active).each(function () {
        $($(this).attr('href')).Bài viết không bị Ẩn();
      });
     
     // Bind the click event handler
      $(this).on('click', 'a', function(e){
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.Bài viết không bị Ẩn();
     
       // 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: [You must be registered and logged in to see this link.]

    #1 - Posted on 27/3/2014, 01:54

    __________________________________________________________________________________________
    [You must be registered and logged in to see this link.]
    [You must be registered and logged in to see this link.]
    Xem lý lịch thành viên

    hoangtuan

    hoangtuan

    Group: Member

    Hiện đang:
    Bài viết : 102
    Points : 191
    Birthday : 19/02/1994
    Thanks : 75
    Đến từ : nam định

    Member
    Xem lý lịch thành viên

    Member
    Bài viết thứ :2

    Đăng vào:on 27/3/2014, 19:29

    Member
    thank bác chupy cười nhăn răng

    #2 - Posted on 27/3/2014, 19:29
    Xem lý lịch thành viên

    roseila

    roseila

    Group: Member

    Hiện đang:
    Bài viết : 94
    Points : 94
    Birthday : 04/05/1999
    Thanks : 0
    Đến từ : tphcm

    Member
    Xem lý lịch thành viên

    Member
    Bài viết thứ :3

    Đăng vào:on 13/8/2015, 11:50

    Member
    code này chèn vào 4rum được ko bác, và chèn sao, lúc post topic mình phải trình bày thế nào để nó hiển thị, phần html trên mình ko hiểu  lắm

    #3 - Posted on 13/8/2015, 11:50
    Xem lý lịch thành viên

    Sponsored content

    Sponsored content

    Group:
    Hiện đang:

    Bài viết thứ :4

    Đăng vào:Today at 11:38

    #4 - Posted Today at 11:38

    Đang kiểm tra dữ liệu...

    Bạn phải điền đầy đủ thông tin đăng ký.

    Số ký tự phải từ 3 trở lên
    Hãy chọn tài khoản khác
    Có thể dùng tài khoản này
    Không sử dụng địa chỉ này
    E-mail sẽ được kiểm sau
    Số ký tự phải từ 3 trở lên
    Trùng tên đăng nhập
    Chưa đúng
    Chính xác

    Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Create a blog
    YOUR BANNER HERE
    728x90