Несколько колонных бутстраповских таблеток

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'); 
    }); 
}); 

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