如何从基于URL的默认选项卡移动到另一个选项卡的活动类？

Question

我想要一个约翰的选项卡在页面加载时使用“active”类来激活。但是，如果URL以特定的hashtag结尾（在本例中为#cindy），我希望Cindy的选项卡在页面加载时激活（例如：'www.index.html＃cindy'）。

到目前为止，我已经获得了激活John标签的页面，但我不知道要从这里开始去Cindy的基于URL的标签页。

任何帮助，将不胜感激。

CSS

#main-container .onPage.active { 
    display: block; 
} 
#main-container .onPage { 
    display: none; 
} 

HTML

<div id="main-container"> 
    <div class="box"> 
     <div class="btnList" id="tabs"> 
      <ul> 
       <li> 
        <a class="tab linkSection" href="#james"><span>James</span></a> 
       </li> 
       <li> 
        <a class="tab linkSection" href="#cindy"><span>Cindy</span></a> 
       </li> 
      </ul> 
     </div> 
     <div class="onPage" id="james"> 
      <div> 
       <h1 class="icon"><span class="b"></span>Meet James</h1><br> 
      </div> 
     </div> 
     <div class="onPage" id="cindy"> 
      <div> 
       <h1 class="icon"><span class="b"></span>Meet Cindy</h1><br> 
      </div> 
     </div> 
    </div> 
</div> 

JS

$(document).ready(function() { 
    $("div#james.onPage").addClass("active"); 
}); 

Answer 1

从网址获取哈希值，并检查它是否为空，并从中决定哪一个激活。

$(document).ready(function() { 
    var hash = window.location.hash; 
    if(hash) { 
     $("div" + hash + ".onPage").addClass("active"); 
    } else { 
     $("div#james.onPage").addClass("active"); 
    } 
}); 

Answer 2

您可以使用window.location.hash从网址获取散列。

$(document).ready(function() { 
    var hash = window.location.hash; 
    if($("div" + hash + ".onPage").length > 0) { 
     $("div" + hash + ".onPage").first().addClass("active"); 
    } else { 
     $("div#james.onPage").addClass("active"); 
    } 
});