我有一个带有 11 个按钮的按钮栏，会导致 iframe 中显示的页面发生页面跳转。
我希望这些按钮在单击时改变颜色，以便它们指示正在显示哪个页面。
这很容易。但问题来了：
假设您点击按钮 4 - 发生页面跳转，显示第 4 页，按钮 4 变为紫色，一切正常。
但是，如果您然后单击第 7 页，将显示第 7 页，按钮 7 变为紫色，但按钮 4 仍然是紫色，不会返回到原始颜色（灰色）。
这就是我需要的，一个脚本，当单击按钮时将按钮的颜色更改为紫色，并且当单击按钮栏中的另一个按钮时将其颜色更改回灰色。
这是按钮代码：
<div id="btn1" title="página 1" style="position: absolute; top: 0px; left: 0px; height:25px; width: 25px; border: 0px ridge white; background-color: transparent; padding: 0px; text-align: center; font-size:10px; font-weight: bold; font-family: arial; olor: white; z-index:10100;<input type=button name="1" value="1" style="width: 20px; height: 20px; font-size: 11px; text-align: left; background-color: "eeeeee"; -webkit-border-radius: 3px;"
onclick="this.style.cursor='hand', this.style.backgroundColor='purple'; this.style.color='white'; document.getElementById('licao').src='lesson1/l1d.htm#l1pg1'"
/>
</div>必须留下一些括号，否则代码不会出现在这里......
所以你看到单击按钮改变了颜色，但是如何让其他按钮恢复到原来的颜色？还有 11 个其他按钮（11 页），每个按钮都可以进行页面跳转。
非常感谢您的帮助。
莱昂纳多。
使用 jQuery，这非常容易做到。您只需要包含 jquery 库并将 $('a') 替换为您的 html 标签或类（用 . 前缀表示您的类，就像在 CSS 中一样）。
http://jsbin.com/apitih/2/edit
参考代码：
HTML：
<body>
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
<a href="#">Page 4</a>
<a href="#">Page 5</a>
</body>
CSS：
a {
background: grey;
color: white;
text-decoration: none;
padding: 5px;
}
jQuery
var links = $('a');
links.click(function() {
links.css('background-color', 'grey');
$(this).css('background-color', 'purple');
});