提问者:小点点

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


我想突出显示我的导航菜单中的当前链接基于当前活动的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背景图像,每个类都有一个悬停函数。


共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>