Display the hashed anchor tab only on page load

When I load the page each tab displays instead of the anchored tab 开发者_如何学Goid called in the address bar. How do I prevent all but the called anchor id from displaying on load or refresh?

<script>
//Grab hash off URL (default to first tab) and update
$(window).bind("hashchange", function(e) {
   var anchor = $(location.hash);
   if (anchor.length === 0) {
      anchor = $(".tabs div:eq(0)");
   }
   updateTabs(anchor);    
});

//Pass in the tab and show appropriate contents    
function updateTabs(tab) {    
   $(".tabs #tab a")    
      .removeClass("active")    
      .filter(function(index) {
            return $(this).attr("href") === '#' + tab.attr("id");    
      }).addClass("active");    
   $(".tabs .content").hide();    
   tab.show();       
}
//Fire the hashchange event when the page first loads    
$(window).trigger('hashchange');    
</script>

<div class="tabs">

    <ul>

        <li class="tab"><a href="#div1">Tab 1</a></li>
        <li class="tab"><a href="#div2">Tab 2</a></li>
        <li class="tab"><a href="#div3">Tab 3</a></li>

    </ul>

    <div id="div1" class="content">Div 1</div>
    <div id="div2" class="content">Div 2</div>
    <div id="div3" class="content">Div 3</div>
</div>

Why not hide all .content elements using CSS:

<style>
    .content { display: none; }
</style>

This will prevent the browser from displaying any of the .content elements before javascript takes over.

Note: If a user visits your website with javascript disabled, they will not see any of the .content elements.

Just hide all Elements with Jquery!

<script>
    $('.content').hide();
</script>

This will set Display to none for each Element, but if Javascript is disabled, the user can use everything.