0

我有一个由八个图像输入图标组成的菜单。我使用 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';

        }
4

1 回答 1

0

这是一个简单的 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');

});
于 2013-07-29T17:49:18.093 回答