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>

适用于＆＃39; about.php＆＃39;但不适用于任何＆＃39; portfolio.php＆＃39;页。

我还添加了

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

到几页，它返回完整路径，包括PHP查询，所以我知道window.location有效。我知道这里可能已经有了答案，但我无法找到它！

解决如果您知道自己在做什么，但对我不知道，那么显而易见的是，在portfolio.php页面的末尾<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>，它出现在about.php页面上。

Answer 1

尝试与window.location.href

进行比较

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

Answer 2

你的if条件必须改变

$("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()进行严格比较，则可行。或者，您可以松散地与==进行比较，而类型转换不会打破比较。

使用Javascript CSS突出显示菜单中的当前PHP页面

3 个答案: