Javascript 单击链接时JQuery更改类

我是JQuery的新手，我知道这个问题已经在其他帖子中得到了回答，但请在这方面帮助我， 如果单击链接，如何更改标记的类别

<li class="link" id="home" >
   <a href="admin?main=home">Home</a>
</li>
<li class="link" id="flt" >
   <a href="admin?main=flt">FLT</a>
</li>

---

请给我解释一下答案，其他类似我的帖子没有那么多细节，所以我真的不明白他们是怎么做到的？

使用下面的脚本

如果您希望在整个页面中保持活动样式，则以下代码将为您提供帮助：

 $(document).ready(function() {
        var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");

        ///// Apply active class to selected page link
        $('.link a').each(function () {

            if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
                $(this).closest('li').addClass('active');
        });

    });

---

单击元素时，实际的单击目标是a元素，其默认操作是导航到href属性中指定的资源

在这种情况下，您将在li事件中注册click事件，该处理程序将被触发，因为在子元素中发生的事件将冒泡到文档根

所以这里的解决方案是防止click事件的默认操作，在本例中，通过调用事件来导航元素

var $lis = $('li').click(function(e) {
    $lis.filter(".active").removeClass("active");
    $(this).addClass('active');
    e.preventDefault()
});

---

使用.closest可访问父li并添加活动类，然后使用同级查找其他li并删除活动类，并使用e.preventDefault防止更改页面

$('li a').click(function(e) {
    e.preventDefault();
    $(this).closest('li').addClass('active').siblings('.active').removeClass('active');
});

---

如果您正在单击a元素，页面位置将更改，那么更改li上的类肯定是多余的吗？除非您已经准备好一些代码，可以在a.click上发出AJAX请求。如果链接正在导航，那么它是无用的，因为导航到新页面的页面将删除该类@你说得对，我从没想过。我怎么解决这个问题呢？我试图添加一个脚本，但即使我删除了链接上的资源，它也不起作用。lis.filter.active.removeClassactive会将一个活动类附加到该类中？@user2785929它会从具有该类的li元素中删除活动类，所以基本上这一行$this.addClass'active'；是否将appen激活到类，以便该类将是link.active？和$lis.filter.active.removeClassactive；是否将其返回到链接类？如果我错了，请更正。如果导航到url，如何保存该类？e.preventDefault删除了链接导航到url的功能，所以我删除了它。这一行$li.active意味着什么？这意味着li的类处于活动状态。即。整行的意思是，如果有任何活动li，请从中删除活动类。如果链接有资源，这种方法似乎不起作用，我如何解决是否有资源可供使用？如何选择最后一个链接？我上面发布的代码部分是一个页面标题，它包含在链接中的所有url中。他们共享同一页眉文档。准备好了吗？我将它放在页眉页上？还有$'.link a.每个我都会放在链接要去的页面上？如果我错了，请纠正我；停止我的链接以导航到其他页面。我明白了，我认为这是你想要的，那么如果我删除e.preventDefault，你可以删除e.preventDefault@user2785929；如果该类导航到url，则不会保存该类

var $lis = $('li').click(function(e) {
    $lis.filter(".active").removeClass("active");
    $(this).addClass('active');
    e.preventDefault()
});

$('li a').click(function(e) {
    e.preventDefault();
    $(this).closest('li').addClass('active').siblings('.active').removeClass('active');
});