-1

我是新手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');
});

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

4

3 回答 3

2

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

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

所以这里的解决方案是通过在事件上调用.preventDefault()来阻止点击事件的默认操作（在这种情况下是a元素的导航） 。

var $lis = $('li').click(function(e) {
    $lis.filter(".active").removeClass("active");
    $(this).addClass('active');
    e.preventDefault()
});
于 2013-09-18T12:36:36.940 回答
1

使用以下脚本。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');
        });

    });
于 2013-09-18T12:36:14.937 回答
0

使用 .closest 到达父 li 并添加活动类，然后使用兄弟姐妹找到其他 li 并删除活动类，并使用 e.preventDefault() 防止更改页面。

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

演示

于 2013-09-18T12:37:13.470 回答