Question

我想设置basic list-group项active的样式以突出显示它（更改背景颜色等）。 Bootstrap仅通过Linked items支持active类。

我有类似的东西：

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

使Cras justo odio样式处于活动状态这样做的最佳做法是什么？

Answer 1

您需要找到所有列表项并从中删除active类。然后，您需要在单击的项目上设置active类。你可以这样做......

https://jsfiddle.net/gtzqw471/2/

Answer 2

你有直接的解决方案。更好的选择应该是使用a和默认光标

.my-list {
  cursor: default;
}

<ul id="my-list" class="list-group">
  <a class="list-group-item active">Cras justo odio</a>
  <a class="list-group-item">Dapibus ac facilisis in</a>
  <a class="list-group-item">Morbi leo risus</a>
  <a class="list-group-item">Porta ac consectetur ac</a>
  <a class="list-group-item">Vestibulum at eros</a>
</ul>

演示 http://www.bootply.com/117174

如何在没有锚标签的情况下激活列表组项？

2 个答案: