1

だから私はこれらの記事を含めて、すべてを閲覧しました：

Jqueryはクリック時に画像を変更します

JQuery - リンクのクリック時に画像のソースを変更するにはどうすればよいですか

http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone

および他のリンクも同様であり、それがどのように機能するのか理解できず、機能させることができないと思います。

これが私がこれまでに持っているものです：

HTML:

<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">

    <ul style="width:450px; height:220px;  list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
        <li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
        <li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>

    </ul>
</div>
    <div style="width:25px; height:110px; position:relative; float:left;">
        <a href="#first"><img src="images/2nd.png" /></a>
    </div>

    <div style="width:25px; height:110px; position:relative; float:left;">
        <a href="#second"><img src="images/1st.png" /></a>
    </div>
</div>

このコードはアンカー タグを使用して動作しますが、問題はページをアンカーに引き下げてしまうことです。これは望ましくありません。そこで、jQuery とイメージ スワップに移りました。私は他の人々のコードを実装して、それらが機能するかどうかを確認しましたが、それらを機能させることができません。私はこのjQueryコードを使用しました：

$(function () {
    $('.menulink').click(function () {
        $("#bg").attr('src', "images/imagegraph1.png");
        return false;
    });
});

このHTMLと一致しました：

<a href="#" title="Switch" class="menulink">switch me</a>
<img src="images/imagegraph2.png" id="bg" />

そして、起こるのは、imagegraph1.png の切り替えではなく、imagegraph2.png の表示だけです。通常、「=」記号をクリックすると、画像の可能なリンクのリストが表示されます。Javascript の場合、それは行われず、どのフォルダー/ファイル名を入力するだけです。したがって、ここでいくつかの否定的な投票が得られると確信していますが、これを機能させるためにすべての道を使い果たしました。

4

1 に答える 1