隐藏/显示基于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中。

等等...

当一个人最初的登陆页面上，我想有在默认的div加载btn1.jpg相关的文字和图片。

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