Многостолбцовые бутстраповые таблетки

Question

Я недавно попробовал front-end (пока не очень хорошо) и кое-что сделал в 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 активную таблетку на обеих колонках? Или, возможно, лучший способ сделать это?

Answer 1

Неважно, я уже решил это, добавив JS

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

в основном он просто удаляет прошлый активный класс, поэтому, когда таблетки начальной загрузки вставляют новый активный класс в другой столбец, он не будет совпадать с первым активным классом.