我有一个问题。单击它时,我需要在选项卡中添加一个类。我在下面解释我的代码。
<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
将不具有类accordionactive
且Lorem 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/