Question

我是JQuery的新手，我知道其他帖子已经回答了这个问题，但请帮助我，如果点击了链接<li>，如何更改<a>代码的类别？

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

这是我到目前为止所尝试的：

$('li').click(function() {
    $("li.active").removeClass("active");
    $(this).addClass('active');
});

请解释我的答案，其他类似于我的帖子没有那么详细，所以我真的不明白他们是怎么做的？

Answer 1

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

在这种情况下，您正在li事件中注册click事件，此处理程序因event bubbling而被触发，其中后代元素中发生的事件将冒泡到文档根目录。

因此，此处的解决方案是通过调用事件上的.preventDefault()来阻止点击事件的默认操作（在本例中为a元素的导航）。

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

Answer 2

使用以下脚本。 http://jsfiddle.net/czG8h/

$('.link a').click(function() {
    $("li.active").removeClass("active");
    $(this).closest('li').addClass('active');
});

如果您希望在页面中保留活动样式，那么以下代码将为您提供帮助：

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

    });

Answer 3

使用.closest来获取父li并添加活动类然后使用兄弟节点查找其他li并删除活动类，并使用e.preventDefault（）来防止更改页面。

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

DEMO

单击链接时JQuery更改类

3 个答案: