CSS 事件类不适用于选项卡内容

Question

我正在尝试将带有 Link 文本的列表项的左边框设置为事件时的红色，并且当用户单击另一个列表项时，前一个边框设置为原始边框，然后将连续的列表项设置为红色左边框。我尝试使用 :active 类，但它无法正常工作:

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

CSS

li {
  list-style-type: none;
}

.list-group li:active {
  border-left: 3px solid #ce2523;
  padding-left: 7px;
  color: #000000;
}

JSFIDDLE:LINK

Answer 1

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

• 删除:事件
• 创建一个 .cative 类，使用与之前 fro :active 相同的 css
• 创建一个 jQuery 来切换类 active

JS FIDDLE

$('.list-group li').on('click', function() {
  $('.list-group li').not(this).removeClass('active');
    $(this).addClass('active');
})

li {
  list-style-type: none;
}

.active {
  border-left: 3px solid #ce2523;
  padding-left: 7px;
  color: #000000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="col-lg-12">
    <div class="col-lg-4 col-md-4 col-sm-4 question-list">
      <ul class="list-group">
        <li class="2" data-toggle="collapse" data-target="#2" aria-expanded="false">Link</li>
        <li class="2" data-toggle="collapse" data-target="#21" aria-expanded="false">Link</li>
        <div id="2" class="tab-content collapse mobile-answer">
          <p class="header">content of link</p>
          <div class="answer">
            <p>Bunch o' content here</p>
          </div>
        </div>
         <div id="21" class="tab-content collapse mobile-answer">
          <p class="header">content of link</p>
          <div class="answer">
            <p>Bunch o' content here</p>
          </div>
        </div>

      </ul>
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>