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：链接

Answer 1

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

• 删除 ：活动
• 创建一个类 .cative 与之前相同的 CSS ：Active
• 创建一个 jQuery 来切换类active

JS 小提琴

$('.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>

Answer 2

如果您能够在"链接"文本周围添加<a>标签，则可以使用纯CSS来实现此目的：

li {
  list-style-type: none;
  display: inline-block;
  margin: 0 10px;
}
li a,
li a:hover {
  color: inherit;
  text-decoration: none !important;
}
.list-group li a:focus {
  border-left: 3px solid #ce2523;
  padding-left: 7px;
  color: #000000;
}

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

Answer 3

你可以使用jquery，因为如果你使用Bootstrap collapse，我认为纯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在这里： https://jsfiddle.net/vxz7zrg9/5/