javascript - 更改单击菜单项的样式表 asp.net 母版页

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

这个有效:

//点击页面加载的第一项 $('#menu-primary li').eq(0).click();

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

但是页面没有加载，因为函数返回 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');
    };
});