改變樣式表

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