Javascript 选项卡导航（将类添加到打开项菜单）

我试图创建标签导航接近最低限度的方式可能。 以下是我到目前为止的情况：

HTML:

JS:

这是一个例子

我的问题：

---

我正在尝试将class.active添加到与已打开部分相关的菜单项中，但我不知道如何添加！采用什么样的逻辑或方法。。。有人能告诉我正确的位置吗？

您的代码工作正常从左侧选择框添加jquery库

$('.tabs ul li').click(function () {
$('ul li').removeClass('active');
$(this).addClass('active');
$('.tabs div > div:eq(' + $(this).index() + ')').show().siblings().hide();
});

---

工作

首先添加jquery库。要从兄弟姐妹中

addClass

到当前和

removeClass

，请尝试以下操作：

 //Tabs Navigation
$('.tabs ul li').click(function (index) {
$('.tabs div > div:eq(' + $(this).index() + ')').show().addClass('active ').siblings().removeClass('active ').hide();
});

---

您尚未添加jquery库。看这个哈哈，谢谢！我已经在我的实际站点中添加了它，但仍然不知道如何将类添加到当前打开的项谢谢，我正在尝试将类添加到当前打开的菜单项中。谢谢，这很有效-有一件事-我如何使用类来默认第一个菜单？因此，它具有类，但具有默认值。我也可以使用JS隐藏和显示div吗？现在我正在用CSS做这件事…非常感谢！你认为它使用可靠吗？@Leo ya我们的要求通过这个

：-）

@Leo看到这个了吗打开时有一些动画

//Tabs Navigation
$('.tabs ul li').click(function() {
   $('.tabs div > div:eq(' + $(this).index() + ')').show().siblings().hide();
});

$('.tabs ul li').click(function () {
$('ul li').removeClass('active');
$(this).addClass('active');
$('.tabs div > div:eq(' + $(this).index() + ')').show().siblings().hide();
});

 //Tabs Navigation
$('.tabs ul li').click(function (index) {
$('.tabs div > div:eq(' + $(this).index() + ')').show().addClass('active ').siblings().removeClass('active ').hide();
});