jquery 当前导航项选择器答案

【问题标题】：jquery Current Nav item selectorjquery 当前导航项选择器
【发布时间】：2013-03-05 07:59:38
【问题描述】：

我不知道如何使用 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');
       }
      });
    });  
  //]]>

【问题讨论】：

您是否有理由不想在服务器端执行此操作？
嘿丹尼斯- 你能说得更具体些吗？谢谢
不是在客户端添加类，而是在 PHP 中回显 class="current" 以获得与请求的 URL 匹配的链接

标签： javascript jquery menu navigation nav

【解决方案1】：

我想通了！！感谢您的帮助 Will.i.am 和 Arun.p。在为每个页面提供正文 id 之后，我只需要下面的代码行。

     /** nav selector **/
     var bodyid = $('body').attr('id');  
     $('#main_nav ul li a.'+ bodyid).addClass('current');

【讨论】：

【解决方案2】：

您可以使用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");
    }
})

演示：Fiddle

【讨论】：

感谢您的快速回复！但是，当我将上面的代码粘贴到 custom.js 文件中时，它不起作用。当我删除您的 // 硬编码字符串时，操作失败。
不走运 - 我的 custom.js : $(document).ready(function () { var str = location.href.toLowerCase(); $("#nav li a").each( function () { if (str.indexOf(this.href.toLowerCase()) > -1) { $("li.current").removeClass("current"); $(this).parent().addClass( "current"); } }); /**HOME PAGE Callout Boxes**/ $("div.individual_callout a").hover(function() { $("div.individual_callout a").stop().animate ({opacity:0.4},400); $(this).stop().animate({opacity:1},1); }, function(){ $("div.individual_callout a").stop()。动画({opacity:4},400); }); });
尝试提醒alert(str)查看路径值