jquery当前导航项目选择器 [英] jquery Current Nav item selector

问题描述

我无法弄清楚如何使用jQuery来设置当前导航项的样式。我已经尝试了几个教程，但无济于事。任何帮助，将不胜感激。
提前致谢。

I can't figure out how to use jQuery to style the current nav item. I've tried several tutorials and such to no avail. Any help would be appreciated. Thanks in advance.

    <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');
       }
      });
    });  
  //]]>

推荐答案

您可以使用属性等于选择器[name =value] 以查找具有当前路径的导航项。

You can use the Attribute Equals Selector [name="value"] to find out the nav item with the current path.

$(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");
    }
})

演示：小提琴

这篇关于jquery当前导航项目选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！