css - 多列自举药丸

Question

我最近尝试过前端（还不是很擅长）并在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>

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

Answer 1

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

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

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