Question

我正在尝试创建接近极简主义方式的标签导航。所以这就是我到目前为止所做的：

HTML：

<div class="tabs">
   <ul>
      <li>Tab A</li>

      <li>Tab B</li>

      <li>Tab C</li>
   </ul>

   <div>
      <div>
         <h4>Tab A</h4>
      </div>

      <div>
         <h4>Tab B</h4>
      </div>

      <div>
         <h4>Tab C</h4>
      </div>
   </div>
</div>

CSS：

/*Tabs Navigation*/
.tabs ul {
   margin: 0;
}

    .tabs ul li {
        color: #fff;
       background-color: #6B6B6B;
       border: 1px solid #6B6B6B;

       padding: 5px 10px;
        float: left;
        list-style: none;
        cursor: pointer;      
    }

.tabs > div {
    border: 1px solid #6B6B6B;
    padding: 20px;

    width: 100%;  
    display: inline-block;
}

.tabs div > div:not(:first-child) {
    display: none;   
}

JS：

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

这是一个JSfiddle。

我的问题： 我试图将class .active添加到与打开的部分相关的菜单项，但我无法想象我们如何！要采取什么样的逻辑或方法......任何人都可以指引我到正确的地方吗？

Answer 1

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

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

工作DEMO

Answer 2

首先添加jquery库。从兄弟姐妹到addClass到当前和removeClass试试这个：

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

<强> Working Demo

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

2 个答案: