Chapter 3.1 Google Play’s minimal tabs


Reference:
http://www.red-team-design.com/google-play-minimal-tabs-with-css3-jquery

The jQuery function used:
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

  <script>
    function resetTabs(){
        $("#content > div").hide(); //Hide all content
        $("#tabs a").attr("id",""); //Reset id's     
    }

    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2    
    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab

    (function(){
        $("#content > div").hide(); // Initially hide all content
        $("#tabs li:first a").attr("id","current"); // Activate first tab
        $("#content > div:first").fadeIn(); // Show first tab content
       
        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //detection for current tab
             return      
            }
            else{            
            resetTabs();
            $(this).attr("id","current"); // Activate this
            $($(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content       
          }
        }
    })()
  </script>


The menu:
  <ul id="tabs">
      <li><a href="#" name="#tab1">One</a></li>
      <li><a href="#" name="#tab2">Two</a></li>
      <li><a href="#" name="#tab3">Three</a></li>
      <li><a href="#" name="#tab4">Four</a></li>   
  </ul>


Demo and source code:

jQuery Google Play Minimal Tabs Demo


ċ
jquery_tab_demo.html
(6k)
Jiansen Lu,
Nov 26, 2012, 1:16 PM
Comments