使用“选项卡”菜单面板，如何控制“活动”选项卡？

Question

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

Answer 1

如果我理解您的要求，您想在单击某些内容时应用一个活动类。您可以使用 JQuery 或 JavaScript 完成此操作

jQuery:

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

然后使用这个：

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

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

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

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