Question

我正在修改导航菜单中当前点击的标签的背景颜色。然后，当我单击其他选项卡时，我希望旧选项卡更改回原始背景颜色。我已经看过很多这样的地方，但是我所遵循的每一个教程都没有为我工作。

这是我用于导航的html代码。基本上，我想将类“member_nav”更改为“member_nav_clicked”，然后在单击其他选项卡时返回“member_nav”。

<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav1(); load_video('6')">Nav 1</a>
</div>
<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav2(); load_video('2')">Nav 2</a>
</div>
<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav3(); load_video('4')">Nav 3</a>
</div>
<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav4(); load_video('5')">nav 4</a>
</div>
<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav5(); load_video('3')">Nav 5</a>
</div>

我不打算包含我尝试过的任何javascript函数，因为它们都没有。

Answer 1

添加active类，然后在点击事件中找到当前有效的元素，并在active类设置$('.active').removeClass('active')类之后删除active类元素$(this).addClass('active')。

@ adeneo在评论中的回答实际上更好。

$(this).addClass('active').siblings().removeClass('active');

Answer 2

老实说，这是一些jQuery 101 ...我建议你阅读基础知识。我为你设置了一个jsFiddle，我希望你不要复制粘贴它，但也试着从中学到一些东西。

您可以在此处找到它：http://jsfiddle.net/wUpYh/1/

代码：

 $('a').on('click', function(){
            $('.member_nav_clicked').removeClass('member_nav_clicked').addClass('member_nav');       
            $(this).closest('.member_nav').removeClass('member_nav').addClass('member_nav_clicked');
        });

所以会发生什么，我删除了member_nav类并添加了点击的类。它上面的一行将处理之前点击的项目。当元素具有活动类时，它将在将其标记为新单击元素之前将其删除。

但说实话，这样做的一个更好的方法是分配一个活跃的类并保持正常的类。像这样：

$('a').on('click', function(){
                $('.member_nav_clicked').removeClass('member_nav_clicked');       
                $(this).closest('.member_nav').addClass('member_nav_clicked');
            });

使用javascript / jquery更改类名的问题

2 个答案: