根据 jpg 按钮选择隐藏/显示 2 个 div

Question

我在网页上有一个带有文本的 div 和一个带有 jpg 图片的单独 div。

网页的不同区域有 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 中。

Answer 1

我已经创建了这个 jsFiddle http://jsfiddle.net/davew9999/gFHnh/，它应该可以满足您的需求。我刚刚完成了 2 个带有 2 组文本和图像的按钮，但是您可以添加更多的 html 按钮，JavaScript 将处理任意数量的按钮。

请注意，没有文本加载为 text1.html 和 text2.html 对我来说不存在，但应该适合你。我还使用了一些来自网络的示例图片来展示它的工作原理。

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"));
    });
});

​