jQuery，突出显示活动菜单项

我想让我的导航jQuery为突出显示活动菜单项（我的菜单是使用精灵btw。）手动添加class =“active”菜单项之一突出作品。但使用我的jQuery代码，什么也没有发生......jQuery，突出显示活动菜单项

任何想法如何解决这个问题？

这里是演示提示的问题。 http://jsfiddle.net/wvEBw/1/

HTML：

<nav> 
    <ul> 
     <li><a href="#" id="btn1"></a></li> 
     <li><a href="#" id="btn2" class="active"></a></li> 
    </ul> 
</nav>

CSS：（动画精灵）

//... 

/* sprite menu animations */ 

nav a#btn1 { 
    background-position:0px 0px; 
    width:82px; 
} 

nav a#btn1:hover { 
    background-position:0px -82px; 
} 

nav a#btn1.active { 
    background-position:0px -164px; 
} 

nav a#btn2 { 
    background-position:-108px 0px; 
    width:82px; 
} 

nav a#btn2:hover { 
    background-position:-108px -82px; 
} 

nav a#btn2.active { 
    background-position:-108px -164px; 
    outline: none; 
}

的jQuery：

$("nav li").click(function() { 
    $("nav li a.active").removeClass("active"); //Remove any "active" class 
    $("a", this).addClass("active"); //Add "active" class to selected tab 

    $(activeTab).show(); //Fade in the active content 
    return false; 
}

来源

2013-08-07 Very Curious

你忘了添加jQuery库在你的小提琴
和用正确关闭你的功能

http://jsfiddle.net/wvEBw/3/

$("nav li").click(function (e) { 
    e.preventDefault(); 
    $("nav li a.active").removeClass("active"); //Remove any "active" class 
    $("a", this).addClass("active"); //Add "active" class to selected tab 

    // $(activeTab).show(); //Fade in the active content 
});

而且这篇文章可能是有趣：Stop Misusing Return False
下面就让我们来看看DOCS：event.preventDefault

来源

2013-08-07 00:41:45

嗨，谢谢你的解决方案。事情是，它仍然在我的项目中不起作用。我已经添加了这个库在我的页面的和jQuery脚本是在不同的文件中，也从头部调用。任何提示的问题可能是？ –

我发现问题了！不得不在这个$（document）.ready（function（）{}）;中包装函数。现在它工作了！感谢您的帮助！ –

@Tiii thx，是的，在编写代码之前，总是要确保DOM已经被读取了:) –

您也可以突出基于与关于当前网址导航您的导航href值。这种方式在重定向和直接跳转到主页时更为有效。考虑这个例子：

$(document).ready(function($) { 
    function markNavActive(){ 
     var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1); 
     var listLinks = $('nav a'); 

     listLinks.each(function() { 
      if ($(this).attr('href') == filename) { 
       // alert(filename); 
       $(this).addClass('active'); 
       return; 
      } 
      if (filename == "") { 
       // alert(filename); 
       $('.nav a[href="index.php"]').addClass('active'); 
       return; 
      } 
     }); 
    } 
    markNavActive();  
});

来源

2015-09-28 02:13:44 DevWL

jQuery，突出显示活动菜单项

回答

相关问题