0

テキストを含む div と、web ページに jpg 画像を含む別の div があります。

Web ページのさまざまな領域に 6 つの (jpg) ボタンがあります。

btn1.jpg を選択すると、text1.html と image1.jpg が 2 つの div に読み込まれます。

btn2.jpg を選択すると、text2.html と image2.jpg で div のコンテンツを置き換えたいと思います。

btn3.jpg を選択すると、text3.html と image3.jpg が div に読み込まれます。

などなど…

最初にページにアクセスしたときに、デフォルトで btn1.jpg に関連付けられたテキストと画像を div にロードしたいと考えています。

4

1 に答える 1

0

私はこのjsFiddlehttp://jsfiddle.net/davew9999/gFHnh/を作成しました。これはあなたが望むことをするはずです。2セットのテキストと画像で2つのボタンを作成しましたが、HTMLボタンを追加するだけで、JavaScriptは必要な数のボタンを処理します。

text1.htmlとtext2.htmlは私には存在しませんが、機能するはずなので、テキストは読み込まれないことに注意してください。また、動作を示すために、Webのサンプル画像をいくつか使用しました。

HTML

<button id="button1" class="textImageChanger" data-image="http://www.transformerhair.com/wp-content/uploads/2010/11/test.jpg" data-html="text1.html">Button1</button>
<button class="textImageChanger" data-image="http://upload.wikimedia.org/wikipedia/commons/9/95/KWF_Test.png" data-html="text2.html">Button2</button>

<div id="textDiv"></div>
<div id="imageDiv"><img src=""/></div>

JavaScript

function LoadText(link) {
    $("#textDiv").load(link);
}

function LoadImage(image) {
    $("#imageDiv img").attr("src", image);
}


$(document).ready(function() {
    LoadText("text1.html");
    LoadImage($("#button1").data("image"));

    $(".textImageChanger").click(function() {
        LoadText($(this).data("html"));
        LoadImage($(this).data("image"));
    });
});

</ p>

于 2012-08-04T15:55:23.760 に答える