Tạo Tab menu bằng jQuery

Tạo một tab menu bằng jquery thật ra cũng không có gì khó khăn. Hôm nay Blog iChiaSe xẽ hướng dẫn các bạn  Hướng dẫn Tạo Tab menu bằng jQuery một cách vừa ý. Nếu các bạn đang sử dụng Blogger cũng có thể tùy biến nội dung cho nó đúng với Blogger

Ảnh demo trực tiếp từ iChiaSe.Biz

Cách làm rất đơn giản bạn chỉ cần làm theo 3 bước như sau :
1. Khai báo sử dụng thư viện jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+ Nếu có rồi bạn có thể bỏ qua nhé
2. Mã HTML để tạo các tab cho menu 

<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">
           /*Star Nội dung trong tab 1*/
               <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>
                  /*End Nội dung trong tab 1*/
        </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 

       $(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();
           
          });
   
       });

Demo bạn xem trực tiếp tại website iChiaSe.Biz nhé

Nguồn : iChiaSe.Biz

Tag : jQuery