Question

我试图在单击标题后使用jQuery向h3添加“活动”类，并在单击另一个h3时将其删除。我在stackoverflow上尝试过很多例子但是无法让类添加。

以下是我的代码示例：

<div id="qa-faq0" class="qa-faq cf">
<h3 class="qa-faq-title"><a class="qa-faq-anchor" href="#">Frequently Asked Question #1</a></h3>

<div class="qa-faq-answer" style="display: none;"><p>Frequently Asked Question #1 Content Goes Here</p>

</div>
</div>

提前致谢！

Answer 1

试试这个http://jsfiddle.net/aamir/6ARUq/1/

$(function(){
    var $h3s = $('h3').click(function(){
        $h3s.removeClass('active');
        $(this).addClass('active');
    });
});

或http://jsfiddle.net/aamir/6ARUq/2/

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

Answer 2

$(".qa-faq-title").click( function(){
    $(".qa-faq-title.active").removeClass("active");

    $(this).addClass("active");
});

这将在单击时删除活动类，然后将其添加到当前单击的项目中。

Answer 3

每次单击标题时，您都可以切换类。

$(function () {
    $(".qa-faq-title").click(function () {
        $("h3.active").removeClass("active");
        $(this).addClass("active");
    });
});

添加/删除活动类Onclick

3 个答案: