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

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

1 个答案: