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

我的主要目标是将 clickedtray li id属性设置为"tray-active"以便应用活动的 CSS nav。

更新：

好的，这行得通：

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

仍然有问题，因为当页面重新加载时，在单击导航菜单后，选定的会获得其“活动”css 样式，除了指向的li那个之外，我如何迭代另一个，以便我可以删除他们的 id？.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/ 这将防止页面在您单击锚标记时重新加载。另外，考虑使用 .on ，因为 .live 已被弃用。

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