单击时更改按钮颜色并将其他按钮更改回原始颜色答案

【问题标题】：change button color when clicked and change others back to original单击时更改按钮颜色并将其他按钮更改回原始颜色
【发布时间】：2013-04-12 09:51:51
【问题描述】：

我有一个带有 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>

必须去掉一些括号，否则代码不会出现在这里...

所以你看到 onclick 按钮改变了颜色，但是我如何让其他按钮恢复到原来的颜色呢？还有 11 个其他按钮（用于 11 个页面），每个按钮都会跳转。

非常感谢您的帮助。

莱昂纳多。

【问题讨论】：

请问您为什么使用<input type="button"> 而不是<button type="button">TEXT</button> 或者只使用<a>作为导航元素的常用方法？此外，最好不要将内联 javascript 混入您的 HTML，并且内联 CSS 是真正的禁忌（例如表格除外）。

标签： html button colors back

【解决方案1】：

使用 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');
});

【讨论】：