我让这个网站的人帮我解决了我遇到的滑块问题,我只需要有人帮我解决最后一块拼图。
这是小提琴http://jsfiddle.net/gajjuthechamp/vrqdh/2/
当您单击“缩略图”时,内容会出现在上面的主 div 中。
我需要“extraContent”下的 div/缩略图在“mainContent”下拥有自己独特的内容 div。
希望这是有道理的。
谢谢
jQuery:
$(function(){
$("#parent").on("click", ".extraContent div", function(){
newHtml=$(this).html();
$("#parent").find(".mainContent p").fadeOut(1000,function(){
$(this).parent().html(newHtml);
$(this).parent().fadeIn(1000);
});
});
});
HTML:
<div id="parent">
<div class="mainContent"> <p>This is the default Text</p></div>
<div class="extraContent">
<div><p>test and Image Goes hear for 1 div</p></div>
<div><p>test and Image Goes hear for 2 div</p></div>
<div><p>test and Image Goes hear for 3 div</p></div>
<div><p>test and Image Goes hear for 4 div</p></div>
</div>
</div>
CSS:
#parent { width:400px; margin:auto}
.mainContent { width:430px; height:300px; border:1px solid #000;padding:5px; }
.extraContent {overflow:auto; width:450px;}
.extraContent div{float:left; width:90px; height:90px; border:1px solid #00F; margin:5px; padding:5px }
.extraContent div:hover { border:1px solid #0F0;cursor:pointer }