Question

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

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

由于它是一个菜单，我还希望它按列分隔：

<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个活性药丸？或者更好的方法呢？

Answer 1

没关系我已经通过添加js

解决了这个问题

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

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

多列自助药片

1 个答案: