＃を見つける、URLでナビゲーションJqueryでAddClass

Question

私はウェブサイトを作っています。私はIDを持つ次のページへのリンクから行きたいです。 index.htmlを

<a href="collection.html#rings">Rings</a> 

ページ名： collection.html

<ul class="nav navbar-nav" id="nav"> 

<li id="rings" class="active"><a href="#">Rings</a></li> 
<li id="earrings"><a href="#">Earrings</a></li> 
<li id="neckwears"><a href="#" id="test1">Neckwear</a></li> 
<li id="purses"><a href="#">Purses</a></li> 
<li id="mini"><a href="#">Set an mini set</a></li> 
</ul> 

私はコードを取り、これに実装しようが、いずれかを取得していない、次の

ページ名のように成功。

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 

     $(function(){ 
    var current = location.pathname; 
    var url = window.location.hash; 
    $('#nav li').each(function(){ 
     var $this = $(this); 
     // if the current path is like this link, make it active 
     if($this.attr('href').indexOf(current) !== -1){ 
      $this.addClass('active'); 
     } 
    }); 
}); 
    }); 
</script> 

URL＃値を使用して#navリストにアクティブなクラスを自動的に入れることができます。

Answer 1

あなたはこのように、セレクタとしてパス名を使用することができます。それらのすべてをループする理由はありません$('#nav li#'+current)

。

$(document).ready(function() { 
 

 
    $(function() { 
 
    var current = "rings"; //location.pathname 
 
    $('#nav li#' + current).addClass("active"); 
 

 
    }); 
 
});

.active a { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav navbar-nav" id="nav"> 
 

 
    <li id="rings" class=""><a href="#">Rings</a></li> 
 
    <li id="earrings"><a href="#">Earrings</a></li> 
 
    <li id="neckwears"><a href="#" id="test1">Neckwear</a></li> 
 
    <li id="purses"><a href="#">Purses</a></li> 
 
    <li id="mini"><a href="#">Set an mini set</a></li> 
 
</ul>

Answer 2

あなただけの間違った変数と比較されました。ただ、下記の

$(document).ready(function() { 
 

 
    $(function(){ 
 
    var current = location.pathname; 
 
    var url = window.location.hash; 
 
    $('#nav li').each(function(){ 
 
     var $this = $(this); 
 
     // if the current path is like this link, make it active 
 
     if("#" + $this.attr('id') == url){ 
 
      $this.addClass('active'); 
 
     } 
 
    }); 
 
    }); 
 
});