[英]Hide/show 2 div based on jpg button selection
我在网页上有一个包含文本的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中。
我已经创建了这个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"));
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.