javascript - 在菜单结构中添加和删除类

Question

网站具有以下菜单结构

<nav class="menu">
    <li><a href="" class"menu-link">1</a></li>
    <li><a href="" class"menu-link">2</a></li>
    <li><a href="" class"menu-link">3</a></li>
</nav>

外部 div(菜单外)，具有以下结构

<div class="container">
    <div class="itens active">1</div>
    <div class="itens">2</div>
    <div class="itens">3</div>
    <div class="itens">4</div>
</div>

如何在单击链接时从所有三个 div 框中删除“active”类，然后仅将其添加到另一个 div 元素？

谢谢

Answer 1

您的标记无效。 li 元素应该只包含在 UL 中。

对于添加/删除类，您可以使用:

$('.menu li').click(function(){
  $('.container .active').removeClass('active');
  $('.container div:eq('+$(this).index()+')').addClass('active');
});

<强> Working Demo