2690

jQueryを使って画像切り替え

OpenClipart-Vectors / Pixabay

jQueryを使って画像切り替えをする方法をメモしておきます。

はじめに

img_switch.html







画像切り替え


画像切り替え


ポイントをいくつか記載します。

img_switch.js

$(function(){
    //画像1の文字をクリックしたら、img_switchの中にある画像をimg01.pngに変える    
    $("#menu01").click(function(){
        $("#img_switch img").attr("src", "img/img01.png");
    });
//画像2の文字をクリックしたら、img_switchの中にある画像をimg02.pngに変える    
$("#menu02").click(function(){
    $("#img_switch img").attr("src", "img/img02.png");
});

//画像3の文字をクリックしたら、img_switchの中にある画像をimg03.pngに変える    
$("#menu03").click(function(){
    $("#img_switch img").attr("src", "img/img03.png");
});

});

特に記載すべき事もないかな。コメント通りに動作しています。

似たような記述を3回も書いているのは若干スマートではないですが、あまり気にしない方向でw

サンプルダウンロード

上記の実際のサンプルです。良かったらどうぞ。

モバイルバージョンを終了