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

基于网页网址的替代方法

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

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

1 个答案: