URLに基​​づいて、アクティブなクラスをデフォルトのタブから別のタブに削除するにはどうすればよいですか？

Question

ページが読み込まれたときに、クラス「アクティブ」を使用してジョンのタブをアクティブにしたい。ただし、URLが特定のハッシュタグ（この場合は#cindy）で終わっている場合、代わりにページが読み込まれるとCindyのタブが有効になります（例： 'www.index.html＃cindy'）。

これまでのところ、Johnのタブを有効にするページがありましたが、ここからどこに移動してURLに基​​づいてCindyのタブに移動するのかわかりません。

ご協力いただければ幸いです。

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

urlからハッシュを取得し、空白であるかどうかを確認し、どちらを有効にするかを決定します。

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

Answer 2

あなたはを使用することができます3210でURLからハッシュを取得します。

$(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"); 
    } 
});