0

iframe に表示されたページでページ ジャンプを引き起こす 11 個のボタンを持つボタンバーがあります。

これらのボタンをクリックすると色が変わり、どのページが表示されているかがわかります。

簡単だ。しかし、ここに問題があります：

ボタン 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 ページ分) があり、それぞれがページジャンプを行います。

大変お世話になりました。

レオナルド。

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 に答える