1

I've tried front-end recently (not very good at it yet) and did a little something in CodePen.

I wanted the content to change upon clicking a category instead of redirecting to another page, but I wanted to avoid jQuery or JS for now. So I tried using the bootstrap pills.

Since it's a menu, I also wanted it to be separated by columns:

<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>

But it seems there are different active pills in each column. Is there a way that I can have only 1 active pill on both columns? Or perhaps a better way of doing this?

TylerH
  • 20,799
  • 66
  • 75
  • 101
anyabythestars
  • 157
  • 1
  • 12

1 Answers1

0

nevermind I already solved it by adding js

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

basically it just removes the past active class so when bootstrap pills embed a new active class on a different column, it wont coincide with the first active class.

anyabythestars
  • 157
  • 1
  • 12