Question

我有一个非常简单的问题，但我自己无法弄清楚。我有以下问题。

我有几个列表项，如下所示。

<li></li>
            <li>
                <img src="images/persoon1.jpg" alt="persoon1">
                <div id="infoPersoon">
                    <h3>Jaap-Jan van der Gouw</h3>
                    <ul id="contactInfo">
                        <li class="label">T</li>
                        <li>070 31 31 066</li>
                        <li class="label">F</li>
                        <li>070 31 31 066</li>
                        <li class="label">M</li>
                        <li>070 31 31 066</li>
                    </ul>
                    <ul id="contactOpties">
                        <li class="email"><a href="#" class="active">Email</a></li>
                        <li class="publicaties"><a href="#">Publicaties</a></li>
                        <li class="vcard"><a href="#">Vcard</a></li>
                        <li class="meerinfo"><a href="#">Meer info</a></li>
                    </ul>
                </div>
            </li>
            <li></li>

问题是我想通过我点击的当前列表添加一个类，当我点击下一个列表项时，必须删除前一个类“active”。

我该如何解决这个问题。

Answer 1

最常见的方法是从任何包含它的标记中删除活动类：

$(".active").removeClass("active");

将它们放在一起将是：

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

Answer 2

您可以像这样添加click处理程序：

$("#contactOpties li a").click(function() {
  $(this).addClass('active')
         .parent().siblings().children().removeClass('active');
});

You can give it a try here。这只会在点击时添加课程，但您也可以在点击时关闭.active课程，然后使用.toggleClass()代替.addClass()。

或者只是为了让您有选项，您可以在<li>上使用点击处理程序或使用.delegate()（对于 lot 元素非常有用，或者动态更改元素），像这样：

$("#contactOpties").delegate("li", "click", function() {
  $(this).children('a').addClass('active').end()
         .siblings().children().removeClass('active');
});

You can give that a try here

jquery：单击删除上一个类

2 个答案: