0

それぞれ異なる画像を持つ3つの異なるHTMLドキュメントを作成し、これらのHTMLファイルを画像を変更したいメニューにリンクするなど、さまざまな解決策を考えることができます。

私はそれがjqueryによって可能であることを知っています、私はこれを達成することができるように理解するのに少し助けが必要です。

4

2 に答える 2

0

あなたはこのようなものを探しているかもしれません（デモを参照）：

HTML

​<div class="menu">
  <a href="#" data-image-src="1.jpg">link 1</a>
  <a href="#" data-image-src="2.jpg">link 2</a>
  <a href="#" data-image-src="3.jpg">link 3</a>
  <a href="#" data-image-src="4.jpg">link 4</a>
  <a href="#" data-image-src="5.jpg">link 5</a>
</div>

​&lt;div id="container">
  <img src="">
</div>​

JavaScript

​$(document).ready(function () {
    $('.menu a').hover(function () {
        $('#container img').attr('src', $(this).data('image-src'));
    });
});​

このコードでは、リンクのデータ属性のリンクにカーソルを合わせたときに表示される画像のソースを配置します。また、リンクにカーソルを合わせると、現在の画像のソースが変更されるコールバックが呼び出されます。

更新しました

デモを見る

于 2012-07-30T10:48:17.577 に答える
0

以下を確認することをお勧めします。

http://api.jquery.com/hover/

http://api.jquery.com/bind/

画像のスワッピングを処理する関数を作成し、要素のイベントハンドラーをバインドしてホバー/クリックするだけです。

.class：hover {background-image：....}のようなCSSを使用してこれを実現することもできます。

于 2012-07-30T10:49:21.383 に答える