使用jquery设置基于当前URL的活动菜单项

我想根据当前活动URL在我的导航菜单中突出显示当前链接。使用jquery设置基于当前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背景图像，每类有一个悬停功能。

来源

2013-06-23 user2513528

jQuery不是一种语言，一个JavaScript库。 – undefined

URL的外观如何？所有你需要做的就是“连接”CSS类与URL。你用ajax下载页面还是整页刷新？ –

您可以使用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>

来源

2013-06-23 12:43:26 Ozzy

没有理由基于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 { /* ... */ }

来源

2013-06-23 13:01:50 TAS

使用jquery设置基于当前URL的活动菜单项

回答

相关问题