Question

当我加载页面时，每个选项卡都会显示，而不是在地址栏中调用的锚定选项卡ID。如何在加载或刷新时阻止除被调用的锚ID之外的所有内容？

<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>

Answer 1

为什么不使用CSS隐藏所有.content元素：

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

这将阻止浏览器在javascript接管之前显示任何.content元素。

注意：如果用户在禁用javascript的情况下访问您的网站，他们将看不到任何.content元素。

Answer 2

用Jquery隐藏所有元素！

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

这会将每个元素的显示设置为无，但如果禁用了Javascript，则用户可以使用所有内容。

仅在页面加载时显示散列锚点选项卡

2 个答案: