使用 Javascript CSS 在菜单中突出显示当前 PHP 页面 [重复]答案

【问题标题】：Highlight current PHP page in menu using Javascript CSS [duplicate]使用 Javascript CSS 在菜单中突出显示当前 PHP 页面 [重复]
【发布时间】：2017-02-15 15:04:59
【问题描述】：

这似乎是一个常见问题，但我还没有找到解决方案。我想在我的菜单中突出显示当前页面。 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 有效。我知道这里可能已经有答案了，但我找不到！

已解决 缺少的东西，如果你知道你在做什么，这很明显，但对我来说，<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 在portions.php 页面的末尾，它出现在about.php 页面上。

【问题讨论】：

Window.location 实际上是一个 Location 对象，因此您可以将其用作一个对象。您正在做的事情是因为Location.toString() 将返回完整的 URL。
尝试与window.location.href比较
见stackoverflow.com/questions/33848734/…
如果我遗漏了一些明显的东西（我很可能），请原谅我 - 我在该链接中看不到解决方案，尽管它似乎确实是同样的问题。另外，window.location 和 window.location.href 都返回完整的 URL，所以我认为这不是问题所在。脚本放置在页面的什么位置是否重要？上面的 HTML 和脚本位于名为 header.php 的文件中，该文件包含在 about.php 和portions.php 中。我不知道这是否有什么不同？

标签： javascript php css

【解决方案1】：

尝试与window.location.href比较

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

【讨论】：

不幸的是，这不起作用。结果一样...
在您的代码运行后，这些链接中是否有任何由 javascript 添加？
不，代码显示在上面列出的页面上，
那么除了page之外的其他参数也用在url中吗？
不，就像它看起来一样，所以完整的 URL 将是 theomoye.co.uk/portfolios.php?page=editorial 例如。

【解决方案2】：

你的 if 条件必须改变

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

【讨论】：

恐怕这也没有用。

【解决方案3】：

=== 的严格比较打破了你的逻辑。如果您对window.loation.toString() 进行严格比较，它会起作用。或者，您可以松散地比较，改用==，类型转换不会破坏比较。

【讨论】：

本来应该是==，但似乎没有什么不同。