改变样式表

Question

我有一个asp.net母版页有这样的菜单：

<menu id="menu"> 
    <nav id="main_nav"> 
    <ul id="menu-primary"> 
     <li ><a href="./">Home</a></li> 
     <li><a href="staff.aspx">Staff</a></li> 
     <li><a href="">Sales</a></li> 
     <li><a href="">Support</a></li> 
     <li><a href="">Administration</a></li> 
    </ul> 
    </nav> 
    </menu> 

在母版页，我想改变的CSS菜单项点击。我有这个jQuery：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $('ul li a').each(function() { 
      var text_splited = $(this).text().split(" "); 
      $(this).html("<span>" + text_splited.shift() + " " + text_splited.join(" ") + "</span> "); 
     }); 

     // click on the first item on page load 
     $('#menu-primary li').eq(0).click(); 

     $('#menu-primary li').click(function (e) { 
      alert('here'); 
      // remove all active classes 
      $('#menu-primary li').removeClass('current-menu-item'); 
      // add active class to clicked item 
      $(this).addClass('current-menu-item'); 
     }); 
    }); 


</script> 

这里是CSS

nav#main_nav ul li.current-menu-item a, 
nav#main_nav ul li a:hover {background: url("../images/menu_bg.png") no-repeat scroll 0 -149px transparent; border-bottom:1px solid #edf7ff} 
nav#main_nav ul li.current-menu-item a span, 
nav#main_nav ul li a:hover span{background: url("../images/menu_bg.png") no-repeat scroll 100% -118px transparent;} 

这一个工程：

//点击第一个项目在页面加载 $（'＃菜单一次Li “）.EQ（0）。单击（）;

 $('#menu-primary li').click(function (e) { 
     // remove all active classes 
     alert($('#menu-primary li').html()); 
     $('#menu-primary li').removeClass('current-menu-item'); 
     // add active class to clicked item 
     $(this).addClass('current-menu-item'); 
     return false; 
    }); 

但是页面没有加载，因为efunction返回false。

显示警报，但css不应用于点击的项目。

Answer 1

你能尝试做这样的

$("#menu-primary li.current-menu-item").removeClass("current-menu-item"); 
$(this).addClass("current-menu-item"); 

东西要设置一个菜单项被默认选中添加current-menu-item类像这样

<li class="current-menu-item"><a href="#">Menu Item</a></li> 

See Working Sample

基于页面URL的替代方法

$('#menu-primary li a').each(function() { 
    var path = window.location.href; 
    var current = path.substring(path.lastIndexOf('/')); 
    var url = $(this).attr('href'); 
    if(current=="") 
    $('#menu-primary li a').first().addClass('current-menu-item'); 


     if (url == current) { 

      $(this).addClass('current-menu-item'); 
    }; 
});