使用 jquery 根据当前 URL 设置活动菜单项答案

【问题标题】：set an active menu item based on current URL with jquery使用 jquery 根据当前 URL 设置活动菜单项
【发布时间】：2013-06-23 21:01:50
【问题描述】：

我想根据当前活动的 URL 在我的导航菜单中突出显示当前链接。

如果我的导航菜单是纯 CSS，我找到了许多解决方案，但我的菜单是基于图像的，因此每个链接的活动类都不同，这就是我卡住的地方。

谁能推荐一些我可以使用的东西？我对 jQuery 很陌生，但发现它非常有用，是我学过的最好的语言之一。

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <li><a class="services" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

每个a标签都有一个预加载的CSS背景图片，每个类都有悬停功能。

【问题讨论】：

jQuery 不是一种语言，一个 JavaScript 库。
网址长什么样？您所要做的就是将 css 类与网址“连接”起来。你是用ajax下载页面还是整页刷新？

标签： jquery

【解决方案1】：

你可以使用javascript来获取#:之后的部分url

window.location.hash

然后再次使用jQuery高亮相关元素：

var linkClass = window.location.hash;
$("."+linkClass).prop("class",linkClass+" highlight");

这只是一种方法（可能不是最优雅的）。在这种情况下，您的 css 将是这样的：

.pageOne {

}  
.pageOne.highlight {

}

你的 HTML 是这样的：

<a href="pageOne.html#pageOne">Page One</a>

【讨论】：

【解决方案2】：

没有理由说明基于 CSS 的方法不适合您。我认为主要有两种方法：

首先，在父元素 fex 上放置类：

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <!-- This is the current page -->
        <li class="current"><a class="services" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

然后您可以使用以下 CSS 规则：

.current .products { /* ... */ }
.current .services { /* ... */ }
.current .about.us { /* ... */ }
.current .contact-us { /* .... */ }
.current .directory { /* ... */ }
.current .bloc { /* ... */ }

这个解决方案允许你为每个条目设置不同的样式，如果你需要更改图像 fex，这很好。

如果您需要对所有条目具有相同的样式并且基于在一个元素上具有多个类，则另一种解决方案会更容易：

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <!-- This is the current page -->
        <li><a class="services current" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

相应的 CSS 将是：

.current { /* ... */ }

【讨论】：