Question

我有这个导航菜单：

    <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"，以便应用有效nav的CSS。

更新：

好的，所以这很有效：

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

自页面重新加载后仍有问题，点击导航菜单后，所选的li获得其“活动”css样式，如何迭代其他.click-li除了一个指向$(this)，所以我可以删除他们的身份？

Answer 1

我认为这就是你正在照顾的事情

$(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/

Answer 2

使用event.preventDefault：http://api.jquery.com/event.preventDefault/ 这将使您在单击锚标记时不会重新加载页面。另外，请考虑使用.on，因为.live已弃用。

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

使用Jquery选择导航列表项（带URL加载）

2 个答案: