javascript - 使用 "tabs"菜单面板，如何控制 "active"选项卡？

Question

我创建了一个 Bootstrap 侧边栏面板作为选项卡导航。如何控制处于事件状态的选项卡？我知道有“事件”类，但我如何实际设置它，以便当您单击“选项卡”时它会使其处于事件状态，以便正确突出显示？这是 JS/Jquery 的事情吗？我猜这是一个常见的事情，我只是无法通过 stackoverflow 或谷歌找到答案。谢谢你!

Answer 1

如果我明白你在问什么，你想在单击某些内容时应用一个事件类。您可以使用 JQuery 或 JavaScript 来完成此操作

JQuery:

首先，给所有选项卡或任何一个类，比如“foo”。

然后使用这个:

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

这样，每当单击类为“foo”的元素时，它都会仅将类“active”添加到该元素，而不是添加到该类中的所有元素。单击一个具有“foo”类的元素，它会从前一个具有“active”类的元素中删除“active”类，并将该类仅赋予刚刚单击的元素。

上述方法使得一次只有一个具有“foo”类的元素可以具有“active”类。如果您希望多个元素可以具有“active”类，请从我的代码示例中删除第二行。

如果我误解了，请发表评论，我会看看我能做什么。