添加和删​​除菜单结构中的类

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>

如何点击链接，“活跃”＆＃39; class从所有三个div框中删除，然后只添加到另一个div元素？

由于

Answer 1

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

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

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

<强> Working Demo

Answer 2

将click事件绑定到div元素。使用.text { flex: 0 0 150px; } .sum { flex: 1; } 删除活动类，然后使用.removeClass('active')

添加类

.addClass('active')

Fiddle

修改

$(".container div").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");

});

updated Fiddle

Answer 3

我不确定您的项目设置，但如果您有任何库或框架，他们通常会提供查找和添加/删除类的方法。

Ex：jquery有像addClass / removeClass和find

这样的方法