CSS活动类不适用于选项卡内容

我试图将

Link

text处于活动状态时列表项的左边框设置为红色，当用户单击另一个列表项时，上一个边框将设置为原始边框，后续列表项将设置为红色左边框。我尝试使用

：active

类，但该类无法正常工作：

      <ul class="list-group">
        <li class="2" data-toggle="collapse" data-target="#2" aria-expanded="false">Link</li>
      </ul>

---

jsfdle:

您可以使用jQuery来实现这一点

• 删除：活动
• 使用相同的css创建一个class.cative，就像之前的fro:active一样
• 创建jQuery以切换类

  活动

$（'.list group li'）。在（'click'，function（）上{
$（'.list group li'）。而不是（this.removeClass（'active'）；
$（this.addClass（'active'）；
})

li{
列表样式类型：无；
}
.主动{
左边框：3px实心#ce2523；
左侧填充：7px；
颜色：#000000；
}

链接
链接
链接的内容

这里有很多内容

链接的内容

这里有很多内容

您可以使用jquery来实现这一点，因为如果您使用的是引导折叠，我认为纯CSS是不可能的

$('.tab-content').on('hide.bs.collapse', function () {
    $(this).prev('li').removeClass('liborder');
})

$('.tab-content').on('show.bs.collapse', function () {
     $(this).prev('li').addClass('liborder');
})

---

jsfiddle here:

如果您能够添加

您的HTML标记完全无效，无论这是否与您正在尝试的内容有关。

唯一可接受的子元素是

-而不是
。我建议将你的
放在
中，并在着手解决CSSNo之前解决所有HTML问题。点击链接时，左边框会闪烁红色，但我需要它在激活时保持红色……我想说的是，在你开始使用CSS之前，你应该更正你的HTML。在建造房屋之前，你是不是要把地基修好？我已经简化了标记，所以这只是一个问题，如何设置<代码> LI>代码>左边框在点击（不只是悬停）上变为红色。这样吗？作为我上面提到的补充，看看这个：。这真的很接近。在将活动类应用于当前选定的项之前，如何将其设置为从所有其他列表项中删除活动类？
$('.tab-content').on('hide.bs.collapse', function () {
    $(this).prev('li').removeClass('liborder');
})

$('.tab-content').on('show.bs.collapse', function () {
     $(this).prev('li').addClass('liborder');
})