jquery - 事件菜单项突出显示

Question

我正在尝试突出显示我当前的菜单项

<nav>
        <ul class="sf-menu">
          <li> <a href="" class="active">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Products</a></li>
          <li><a href="">Training</a></li>
          <li class="last"><a href="">contacts</a></li>
        </ul>
      </nav>

jquery代码是

<script type="text/javascript">$(function(){
var url = window.location.href; 
// passes on every "a" tag 
$("#sf-menu a").each(function() {
        // checks if its the same on the address bar
    if(url == (this.href)) { 
        $(this).closest("li").addClass("first active");
    }
});});</script>

我的CSS脚本是

.sf-menu > li > a:hover, .sf-menu > li.sfHover > a, .sf-menu > li.active > a {
color: #FFFFFF;
background: url(../images/sf-menu-tail.jpg) repeat scroll 0 0 transparent;
box-shadow: 1px 1px #000;
cursor: pointer;
border-left:1px solid #434343;
border-top:1px solid #434343;
padding:6px 29px 10px 29px;
height:15px; }  

.sf-menu > li > ul > li.sfHover > a, .sf-menu li li a:hover, .sf-menu li li a.active {
background: url(../images/sf-menu-tail-1.png) no-repeat 0 0;
color: #FFFFFF;}

.sf-menu > li > li.sfHover > li > a, .sf-menu li li li a:hover, .sf-menu li li li a.active {
background: url(../images/sf-menu-tail-2.png) no-repeat 0 0;
color: #FFFFFF; }

所以我需要高亮显示当前事件菜单项以显示带有背景图像的事件背景菜单项。请找出我的错误并改正，以便菜单正常工作

需要给li添加class(first active)

Answer 1

检查 window.location.href 可能没有用，但如果你真的需要，使用这个:

if(url.indexOf(this.href) !== -1) { 
    $(this).closest("li").addClass("first active");
}