Question

我尝试将列表项的左边框设置为活动时Input0_ProcessInputRow文本为红色，当用户单击另一个列表项时，前一个边框设置为原始边框和后续边框然后将列表项设置为红色左边框。我尝试使用Link类，但这样做不正常：

:active

CSS

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

JSFIDDLE：LINK

Answer 1

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

删除：有效
使用与之前相同的css创建一个类.cative：active
创建一个jQuery来切换类active

JS FIDDLE

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 3

如果您能够在“链接”文本周围添加<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>

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

3 个答案: