我有一个问题。单击它时,我需要在选项卡中添加一个类。我在下面解释我的代码。

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title accordionactive">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <i class="more-less glyphicon glyphicon-minus"></i>
                Lorem ipsum1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <i class="more-less glyphicon glyphicon-plus"></i>
                Lorem ipsum2
            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        </div>
    </div>
</div>

$(".panel-heading h4").click(function() {
       $(this).parent().addClass('accordionactive').siblings().removeClass('accordionactive');
 })


在这里最初Lorem ipsum1由类accordionactive突出显示。在这里,我需要用户何时单击Lorem ipsum2,然后第一个Lorem ipsum1将不具有类accordionactiveLorem ipsum2选项卡将添加类。请帮我。

最佳答案

您需要从h4元素而不是其父div元素添加remove类。您可以存储h4元素的对象以绑定click事件并从所有h4元素中删除类,然后在点击处理程序中添加被单击的h4元素:

var panelh4 = $(".panel-heading h4");
panelh4.click(function() {
   panelh4.removeClass('accordionactive');
   $(this).addClass('accordionactive')
});

关于javascript - 无法使用jQuery和CSS在选项卡中添加类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40671188/

10-12 00:07
查看更多