一次只切换一个onClick imageChange(将所有其他图像切换到原始状态)?

时间:2013-03-16 22:15:54

标签: javascript jquery html

我有一个由图标组成的导航栏,当点击时会改变(“点亮”),以指示当前正在显示哪个div。

问题是,我希望当一个图像被更改(点击时点亮)时,所有其他图像都会恢复到原始状态。

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

有没有一种简单的方法来实现它?

编辑:我目前正在使用this method jQuery图像切换。我是一个真正的业余爱好者所以我不知道我在哪里开始使用每个切换也将所有其他图标切换回原始状态。

1 个答案:

答案 0 :(得分: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