0

我有一个带有 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 个页面），每个按钮都会跳转。

非常感谢您的帮助。

莱昂纳多。

4

1 回答 1

0

使用 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');
});
于 2013-04-30T22:06:32.483 回答