javascript - 一次只切换一个 onClick imageChange（将所有其他图像切换到原始状态）？

Question

我有一个导航栏，它由单击时会发生变化（“亮起”）的图标组成，以指示当前正在显示哪个 div。

问题是，我想要这样当一个图像被更改（点击时亮起）时，所有其他图像都会恢复到原来的状态。

目前它们都只是简单的切换，这意味着当我单击一个然后另一个时，它们都保持点亮状态，这显然是我不想要的。

有没有一种简单的方法来实现这个？

编辑：我目前正在使用这种jQuery 图像切换方法。我是一个真正的业余爱好者，所以我不知道我会从哪里开始使用每个切换来将所有其他图标切换回它们的原始状态。

Answer 1

定义一个类来指示选定的选项卡并使用 CSS 应用突出显示（显示/隐藏图像，更改精灵的背景位置，等等）。然后：

$("#menu li").click(function (e) {
    $("#menu li.selected").removeClass("selected");
    $(this).addClass("selected");
});

编辑：要调整您现有的代码以使用 CSS 应用突出显示，请更改您的 html 以便每个菜单项都有两个图像：

<ul id="menu">
    <li>
        <img class="off" src="menu1-original-icon.png" />
        <img class="on" src="menu1-lit-up-icon.png" />
    </li>
    <li>
        <img class="off" src="menu2-original-icon.png" />
        <img class="on" src="menu2-lit-up-icon.png" />
    </li>
    ...
</ul>

然后，使用 CSS 隐藏一个并显示另一个：

#menu .on, #menu .selected .off
{
    display: none;
}
#menu .selected .on
{
    display: inline;
}

这是一个演示：jsfiddle.net/PLRfJ

要允许选择无（单击已选择取消选择它），请在删除类时使用.toggleClass()代替.addClass()和排除：this

$("#menu li").click(function (e) {
    $("#menu li.selected").not(this).removeClass("selected");
    $(this).toggleClass("selected");
});

jsfiddle.net/PLRfJ/1