Question

我有一个带有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按钮改变了颜色，但是如何让OTHER按钮恢复原来的颜色？还有11个其他按钮（11页）各自制作一个pagejump。

非常感谢你的帮助。

莱昂纳多。

Answer 1

使用jQuery这很容易做到。你只需要包含jquery库并用你的html标签或类替换$（'a'）（用你的类作为前缀的符号，就像在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');
});

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

1 个答案: