Advertisement
Guest User

Untitled

a guest
Sep 12th, 2012
56
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.11 KB | None | 0 0
  1. <ul class="tabs default">
  2.                 <li><a href="#tab-1">Design</a></li>
  3.                 <li><a href="#tab-2">Wordpress</a></li>
  4.                 <li><a href="#tab-3">Print</a></li>
  5.                 <li><a href="#tab-4">SEO</a></li>
  6.                 </ul><!--END ul tabs container-->
  7.                                
  8.                 <div class="tab_container default">
  9.                
  10.                     <div id="tab-1" class="tab_content">                       
  11.                         <p>Etiam eget mi enim, non ultricies nisi voluptatem, illo inventore veritatis et quasi architecto beataeantium doloremque laudantium.</p>
  12.                     </div><!--END tab-content-->
  13.                                                
  14.                     <div id="tab-2" class="tab_content">   
  15.                         <p><span class="dropcap2">S</span>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantiuque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
  16.                     </div><!--END tab-content-->
  17.                                                
  18.                     <div id="tab-3" class="tab_content">
  19.                         <p><span class="dropcap1">E</span>tiam eget mi enim, non ultricies nisi voluptatem, illo inventore veritatisium, totam rem aperiam, eaque ipsa quae ab illo.</p>
  20.                     </div><!--END tab-content-->
  21.                                    
  22.                     <div id="tab-4" class="tab_content">
  23.                         <p><span class="dropcap1">E</span>tiam eget mi enim, non ultricies nisi voluptatem, illo inventore veritati explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
  24.                     </div><!--END tab-content-->           
  25.                                    
  26.                 </div><!--END tab-container-->
  27.  
  28.  
  29.  
  30. jQuery(document).ready(function($)
  31. {
  32.     //Default Action
  33.     $(".tab_content").hide(); //Hide all content
  34.     $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  35.     $(".tab_content:first").show(); //Show first tab content
  36.    
  37.     //On Click Event
  38.     $("ul.tabs li").click(function()
  39.     {
  40.         $("ul.tabs li").removeClass("active"); //Remove any "active" class
  41.         $(this).addClass("active"); //Add "active" class to selected tab
  42.         $(".tab_content").hide(); //Hide all tab content
  43.         var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
  44.         $(activeTab).fadeIn(); //Fade in the active content
  45.         return false;
  46.     });
  47.  
  48. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement