javascriptを使ってnavbarを管理する

Question

私はnavbarに3つの項目を持つWebページを持っています。製品、パートナー、サポート私はこのnavbarを別々の.htmlファイルに移動しました。 navbar.htmlを開き、load-navbar.jsを使用して呼び出します。私はコードの繰り返しを避けるためにこれを行った。 javascriptを使用して、どのnavbar項目がアクティブであるかを表示できますか？これを行うためにswitch文を使用することは可能ですか？はいの場合、どうすればいいですか？

navbar.html

<nav class="navbar navbar-default mc-header navbar-static-top"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="../index.html"><img id="logo" src="images/logo.svg" alt="Company Logo"></a> 
    </div> 
    <div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing"> 
     <ul class="nav navbar-nav navbar-right" > 
      <li><a class="mc-active" href="Items/products.html">Products</a></li> 
      <li><a href="partners.html">Partners</a></li> 
      <li><a href="support.html">Support</a></li> 
     </ul> 
    </div> 
</nav> 

負荷navbar.js

$(function(){ 
    $("#main-nav").load("main-nav.html"); 
}); 

製品におけるMC-アクティブクラスは、その製品を示すために、クラスに追加されます.htmlはアクティブなクラスです。

Answer 1

あなたは変数に現在のURLを保存することができます：

var x = $(location).attr('href'); 

をそしてHREFはURLと一致する場合は、リンクに「アクティブ」クラスを割り当てるか、それはだ場合hrefが、URL内に含まれている方あなたの状況に合っています。もっと自分の状況に合うかもしれません詳細は

jquery active link google

：

css-tricks link

またはこの検索：このリンクを利用することができます。私はウィンドウhrefとリンクhrefの単純な比較以上のものは必要ないと思います。また、私は間違いなくコメントのアドバイスに従います。