Question

我有一个由八个图像输入图标组成的菜单。我使用Javascript使点击的图标变为蓝色。但是，当我点击另一个图标时，我需要它恢复正常。是否有一个纯粹的JavaScript解决方案？

这是我如何将按钮变为蓝色的示例..

按钮由可点击的图标和下方的标签组成。下面的标签是我点击时变为蓝色的标签。

我查询了所有按钮以确定单击了哪个按钮，并使用单击按钮的ID更改图标蓝色下方的文本，以及按钮链接到的页面部分的标题，这就是为什么我将图标的ID与该部分的标题相匹配。

通过访问我附加的范围的样式属性，只需更改下面的标签，如下所示......

this.id.search("routenav");
       if(this.id.match("routenav")) {
            document.getElementById("routetitle").style.color = 'blue';

            var b = document.getElementById("b");
            b.style.color = 'blue'
            b.style.fontSize = '30px';

        }

Answer 1

这是一个简单的jQuery解决方案，假设您的导航类似于下面的HTML。这可以很容易地配置为用于锚标签（）等。

http://jsfiddle.net/Y5jxh/

HTML 的

<ul id="nav">
     <li>one</li>
     <li>two</li>
     <li>three</li>
</ul>

CSS

ul, li {
     margin: 0;
     padding: 0;
     list-style: none;
     font-size: 25px;
}
li {
     font-size: 25px;
     cursor: pointer;
}
.active {
     color: blue;
}

的jQuery

$('#nav').on('click', 'li', function() {

    /* remove 'active' class from all possible navigation elements */
    $(this).siblings().removeClass('active');

    /* add 'active' class to current element */
    $(this).addClass('active');

});

单击另一个菜单选项时，如何使所选菜单选项恢复正常？

1 个答案: