Tạo tab cho menu bằng jquery

Tạo cột tab menu bằng jquery thật ra cũng không có gì khó khăn. Những hướng dẫn sau sẽ giúp bạn có được một tab menu jquery vừa ý

Xem demo online tại đây

Cách làm như sau 

1. Khai báo sử dụng t mhư viện jquery

<script src="scripts/jquery-1.2.3.min.js"></script>

2. Mã HTML để tạo các tab cho menu

CODE


<div class="tabbed_area">
 
      
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Topics</a></li>
            <li><a href="#" title="content_2" class="tab">Archives</a></li>
            <li><a href="#" title="content_3" class="tab">Pages</a></li>
        </ul>
    
        <div id="content_1" class="content">
             <ul>
                 <li><a href="">HTML Techniques <small>4 Posts</small></a></li>
                 <li><a href="">CSS Styling <small>32 Posts</small></a></li>
                 <li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
                 <li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
                 <li><a href="">Site News <small>6 Posts</small></a></li>
                 <li><a href="">Web Development <small>8 Posts</small></a></li>
               </ul>
        </div>
        <div id="content_2" class="content">
             <ul>
                 <li><a href="">December 2008 <small>6 Posts</small></a></li>
                 <li><a href="">November 2008 <small>4 Posts</small></a></li>
                 <li><a href="">October 2008 <small>22 Posts</small></a></li>
                 <li><a href="">September 2008 <small>12 Posts</small></a></li>
                 <li><a href="">August 2008 <small>3 Posts</small></a></li>
                 <li><a href="">July 2008 <small>1 Posts</small></a></li>
               </ul>
        </div>
        <div id="content_3" class="content">
             <ul>
                 <li><a href="">Home</a></li>
                 <li><a href="">About</a></li>
                 <li><a href="">Contribute</a></li>
                 <li><a href="">Contact</a></li>
               </ul>
        </div>
 
    </div>

3. Mã jQuery để thực thi sự kiện khi click và tab menu

CODE



       $(document).ready(function(){
       
          // Sự kiện khi nhấn vào các tab của menu
          $("a.tab").click(function () {
            
            
               // tắt tất cả các tab
               $(".active").removeClass("active");
            
               // bật tab đang click lên
               $(this).addClass("active");
            
               // tạo hiệu ứng trượt lên trên cho nội dung của tab đang click
               $(".content").slideUp();
            
               // Nếu là tab đầu tiên thì set hiệu ứng là trượt xuống dưới
               var content_show = $(this).attr("title");
               $("#"+content_show).slideDown();
         
          });
  
       });

Chúc bạn thành công.

Theo: miendatweb