当前导航项选择器
jquery Current Nav item selector
我不知道如何使用jQuery来设置当前导航项的样式。我尝试了几个教程,但都无济于事。任何帮助都会很感激。提前谢谢。
<div id="menu">
<ul id="nav">
<li><a href="http://poolguys.jaredmc.com/index.php">Contact</a></li>
<li><a href="http://poolguys.jaredmc.com/index.php">Gallery</a></li>
<li><a href="http://poolguys.jaredmc.com/pool_liners.php">Pool Liners</a></li>
<li><a href="http://poolguys.jaredmc.com/services.php">Services</a></li>
<li><a href="http://poolguys.jaredmc.com/about.php">About</a></li>
<li><a href="http://poolguys.jaredmc.com/index.php">Home</a></li>
</ul><!--end nav-->
</div><!--end menu-->
/** nav styling **/
//<![CDATA[
jQuery(function() {
jQuery('#nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('current');
}
});
});
//]]>
您可以使用Attribute Equals Selector [name="value"]来查找具有当前路径的导航项。
$(document).ready(function () {
var str = location.href.toLowerCase();
var item = $('#nav li a[href="' + str + '"]');
if(item.length){
$("li.current").removeClass("current");
item.parent().addClass("current");
}
})
演示:小提琴
我明白了!谢谢你的帮助,Will.i.am和Arun.p。下面的代码行是我给每个页面的主体id后所需要的。
/** nav selector **/
var bodyid = $('body').attr('id');
$('#main_nav ul li a.'+ bodyid).addClass('current');
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery最近父级的数据属性选择器
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- jquery IE7中的第n个选择器
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- jquery日期选择器年份范围默认值
- Bootstrap日期选择器键盘导航:选择日期时"突出显示”;
- 菜单导航不适用于 jquery 日期选择器
- 哪个选择器使导航栏固定并随页面滚动
- 引导导航面板和日期选择器,并用javascript调用C#控制器
- 导航条文本的选择器
- 当前导航项选择器
- 设置一个自定义范围选择器,并在图表和导航器上禁用xAxis标签
- 如何在某个ID选择器上更改导航链接的颜色?更具体地说,使用视差脚本
- 导航选择器