Question

我有一个列表项目的菜单，如果有人点击它，它们会有不同的背景颜色。我使用此代码来实现：

$(function() {
   var links = $('a.link').click(function() {
       links.removeClass('active');
       $(this).addClass('active');
   });
});

工作得很好。 CSS工作得很好，所以颜色会改变，但我有一个问题，那就是我不能设置一个标准的列表项，以便在有人点击它之前有一个背景颜色。所以我希望在有人点击它之前在列表项上有红色背景。如果有人点击其他列表项，则此红色背景颜色必须从标准切换到单击的颜色。

我怎样才能做到这一点？

这是菜单：

<nav id="navigation">
<ul id="quick-index-nav" class="slim">
<li>
<a class="link" href="#">First one</a>
</li>
<li>
<a class="link" target="main" href="#">Second one</a>
</li>
<li>
<a class="link" href="#">Third one</a>
</li>
</ul>
</nav>

Answer 1

我在脚本中添加了另一个removeClass，并在列表项目上给出了一个背景颜色，我希望在单击它之前突出显示它。这就像一个魅力。

$(function() {
    $('a.link').click(function() {
       $('.link').removeClass('active');
       $('.a-class-name').removeClass('a-class-name');
       $(this).addClass('active');
   });
});

Answer 2

为什么要把它放在var中？如果你想要选择一个类，你需要将它放在jquery选择器$('.link')

中

$(function() {
    $('a.link').click(function() {
       $('.link').removeClass('active');
       $(this).addClass('active');
   });
});

首先设置活动链接css并动态更改它

2 个答案: