Javascriptを使用してメニュー内の現在のPHPページを強調表示CSS

Question

これはよくある問題のようですが、まだ解決策が見つかりませんでした。私は私のメニューで現在のページを強調したいと思います。 JavascriptとCSSが最良の選択肢だと思われますが、PHPクエリを含むページでは動作しません。

HTML

<ul class="topnav" id="myTopnav"> 
<li><a href="about.php">About/Contact</a></li> 
<li><a href="portfolios.php?page=travel-nature">Travel &amp; Nature</a></li> 
<li><a href="portfolios.php?page=video">Video</a></li> 
<li><a href="portfolios.php?page=editorial">Editorial</a></li> 
<li><a href="portfolios.php?page=corporate">Corporate</a></li> 
</ul> 

Javascriptを

<script> 
$(function(){ 
$("a").each(function() { 
if ($(this).prop("href") === window.location) { 
    $(this).addClass("current"); 
} 
}); 
}); 
</script> 

それはabout.php」のためではなく、 'portfolios.php' ページのいずれかのために働きます。

私はまた、ページのカップルに

<script> 
document.write(window.location); 
</script> 

を追加しましたし、それがPHPのクエリを含む完全なパスを返しますので、私はwindow.location作品を知っています。 おそらくここには既に回答がありますが、私はそれを見つけることができません！

が欠落していた何 を解決し、あなたは何をしているかを知っていれば明らかであるが、ではない私には、それがabout.phpページに存在していたportfolios.phpページの最後に<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>ました。

Answer 1

はwindow.location.href

$("a").filter(function() { 
    return this.href === window.location.href;  
}).addClass("current"); 

Answer 2

と比較してみ条件が

$("a").each(function() { 
    $(this).removeClass("current"); 
    if ($(this).attr("href") == location.href.substr(location.href.lastIndexOf('/') + 1)) { 
     $(this).addClass("current"); 
    } 
}); 

Answer 3

を変更する必要がある場合は、あなたの厳密な比較===は、あなたのロジックを壊しています。 window.loation.toString()で厳密な比較を行うと、それは機能します。または、代わりに==と大まかに比較できます。型変換によって比較が中断されることはありません。