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

我有这个导航菜单：

    <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> 

我的主要目标是将单击的

托盘li

id

属性设置为

托盘活动“

，以便应用活动

导航的CSS

更新：

好的，这样就行了：

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

仍然存在问题，因为当页面重新加载时，在单击导航菜单后，所选的
li
获得其“活动”css样式，我如何迭代其他
。单击li
，除了
$（this）
指向的那一个，这样我就可以删除它们的id了？
使用事件。默认：
这将防止在单击锚定标记时重新加载页面。此外，考虑使用。根据AS。生活被贬低。
$('ul').on('click', '.click-li', function(e) {
    e.preventDefault();
    var subMenuItem = $(this).text();
    alert('Sub Menu Item: '+subMenuItem);
});

我想这就是你要照顾的

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

.live（）
不推荐使用，请使用
.on（）
我看不到您调用remoteAttr函数的“托盘”的id？为什么要使用
'vclick'
？@Antony感谢它工作正常。哎呀，当导航菜单项为clickedget ride of event.preventDefault（）时，它阻止了重定向；它将重定向。如果你想重定向，那么你可能需要做不同的工作，因为当你在重定向后返回此页面时，它将不会保留哪个li有id，哪个没有id。Javascript是在客户端完成的，当您重定向它时，它将来自服务器端。耶，这就是为什么我在工作时遇到了一些问题。也许我可以检查浏览器url？或者有其他优雅的解决方案吗？
$(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");
    });
});