多列自举药丸答案

【问题标题】：Multiple column bootstrap pills多列自举药丸
【发布时间】：2016-07-04 07:24:38
【问题描述】：

我最近尝试了前端（还不是很擅长）并在CodePen做了一些事情。

我希望在单击一个类别而不是重定向到另一个页面时更改内容，但我现在想避免使用 jQuery 或 JS。所以我尝试使用引导药丸。

因为它是一个菜单，所以我也希望它按列分隔：

<div class="col-md-6">
  <ul class="nav-pills nav-stacked">
     <li class="active"><a data-toggle="pill" href="#before">test1</li>
     <li><a data-toggle="pill" href="#engaged">test2</a></li>
  </ul>
</div>
<div class="col-md-6">
 <ul>
     <li><a data-toggle="pill" href="#themeandstyle">Test3</a></li>
 </ul>

但似乎每列中都有不同的活性药丸。有没有办法让我在两列上都只有 1 个活性药丸？或者也许是更好的方法？

【问题讨论】：

标签： css twitter-bootstrap nav-pills

【解决方案1】：

没关系我已经通过添加js解决了它

 $(document).ready(function () {       
     $('.nav-dropdown ul li a').click(function () {
         $('.nav-dropdown li').removeClass('active');
     });
 });

基本上它只是删除了过去的活动类，所以当引导药丸在不同的列上嵌入一个新的活动类时，它不会与第一个活动类重合。

【讨论】：