使用“标签”菜单面板，如何控制“活动”标签？

Question

I created a bootstrap sidebar panel as the tab navigation. How can I control the tabs that are active? I know there's the "active" class, but how do I actually set it so when you click a "tab" it will make it active so it highlights properly? Is this going to be a JS/Jquery thing? I'm guessing this is a common thing, I just cannot find an answer via stackoverflow or google. Thank you!

Answer 1

If I understand what you are asking, you want to apply an active class when something is clicked. You can do this with JQuery or JavaScript

JQuery:

first of all, give all of the tabs or whatever a class, say 'foo'.

THEN use this:

$('.foo').onClick(function(){
    $('.foo').removeClass('active');
    $(this).toggleClass('active');
});

this way, whenever an element with the class 'foo' is clicked, it adds the class 'active' to THAT ELEMENT ONLY, not to all the elements in the class. Click one element with class 'foo' and it removes the 'active' class from the previous element with 'active' class, and gives the class to the element that was just clicked only.

The above method makes it so that only one element with class 'foo' can have the 'active' class at a time. If you would rather have it so that multiple elements can have the 'active' class, remove the second line from my code sample.

If I'm misunderstanding, comment and I'll see what I can do.