-1

私はこのナビゲーションメニューを持っています:

    <ul>
      <li class="click-li" id="tray-active"><a href="/">Home</a></li> <!-- Active page -->
      <li class="click-li"><a href="/news">News</a></li>
      <li class="click-li"><a href="/products">Products</a></li>
      <li class="click-li"><a href="/sales">General Sales T and C</a></li>
      <li class="click-li"><a href="/jobs">Job Opportunities</a></li>
      <li class="click-li"><a href="/inquire">Inquiry</a></li>
    </ul>

アンカーをクリックすると、ページが再読み込みされます (私のサイトは CMS に基づいているため)。したがって、これがこのコードが機能しない理由であると推測しています。

  $(document).ready(function(){
        console.log("document ready");
        $("#tray li").removeAttr("id"); 

        $('.click-li').live('vclick', function() {
          var subMenuItem = $(this).text();
          alert('Sub Menu Item: '+subMenuItem);
        });
  });

私の主な目標は、クリックされたtray li id属性をに設定し"tray-active"て、アクティブの CSSnavが適用されるようにすることです。

アップデート：

わかりましたので、これはうまくいきました：

        $('.click-li').on('click', function() {
          var subMenuItem = $(this).text();
          alert('Sub Menu Item: '+subMenuItem);
        });

liページがリロードされ、ナビゲーション メニューをクリックした後、選択したものが「アクティブな」css スタイルを取得する.click-liので、まだ問題があります$(this)。

4

2 に答える 2

2

私はこれがあなたが見ているものだと思います

$(document).ready(function(){
    console.log("document ready");
    $('.click-li').click(function(event) {
        event.preventDefault();
        $(".click-li").removeAttr("id"); 
        var subMenuItem = $(this).text();
        alert('Sub Menu Item: '+subMenuItem);
        $(this).attr("id", "tray-active");
    });
});

http://jsfiddle.net/XYJaf/6/

于 2013-03-11T17:35:31.823 に答える
0

event.preventDefault を使用します: http://api.jquery.com/event.preventDefault/ これにより、アンカー タグをクリックしたときにページが再読み込みされなくなります。また、.live は非推奨であるため、.on の使用を検討してください。

$('ul').on('click', '.click-li', function(e) {
    e.preventDefault();
    var subMenuItem = $(this).text();
    alert('Sub Menu Item: '+subMenuItem);
});
于 2013-03-11T17:25:46.403 に答える