0

次のようなメニューを含む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;
     });

しかし、efunction が false を返すため、ページは読み込まれません。

アラートは表示されますが、クリックした項目に CSS が適用されません。

4

1 に答える 1

0

こんなことやってみるか

$("#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>

作業サンプルを見る

ページ 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');
    };
});
于 2012-10-06T11:18:20.300 に答える