miriamdepaula

JQuery: Simple Tabs

Nov 10th, 2011
218
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script type="text/javascript">
  2.     jQuery( function($){
  3.        
  4.           //Default Action
  5.           $(".tab_content").hide(); //Hide all content
  6.           $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  7.           $(".tab_content:first").show(); //Show first tab content
  8.          
  9.           //On Click Event
  10.           $("ul.tabs li").click(function() {
  11.               $("ul.tabs li").removeClass("active"); //Remove any "active" class
  12.               $(this).addClass("active"); //Add "active" class to selected tab
  13.               $(".tab_content").hide(); //Hide all tab content
  14.               var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
  15.               $(activeTab).fadeIn(); //Fade in the active content
  16.               return false;
  17.           });
  18.          
  19.           //via url hash
  20.           var url = document.location.toString();
  21.           if (url.match('#')) { // the URL contains an anchor
  22.             // click the navigation item corresponding to the anchor
  23.             var myAnchor = '#' + url.split('#')[1];
  24.             $('ul.tabs li a[href="' + myAnchor + '"]').parent().click();
  25.           }
  26.  
  27.     });
  28. </script>
  29.  
  30.  
Advertisement
Add Comment
Please, Sign In to add comment