Question

我有一个来自这个网站的人帮我解决了我遇到的滑块问题，我只需要有人来帮助我解决最后一块拼图。

这是小提琴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 }

Answer 1

jsFiddle demo

HTML：

<div id="parent">
    <div class="mainContent">
        <div class="cont"> Content 1....</div>
        <div class="cont"> Content 2....</div>
        <div class="cont"> Content 3....</div>
        <div class="cont"> Content 4....</div>  
    </div>
    <div class="extraContent">
        <div><p>1 Custom content here</p></div>
        <div><p>2 Custom content here</p></div>
        <div><p>3 Custom content here</p></div>
        <div><p>4 Custom content here</p></div>
    </div>
</div>

ADDED CSS：

.cont{position:absolute;}

jQuery的：

$(function(){
  $('.cont:gt(0)').hide();
  $("#parent").on("click", ".extraContent div", function(){
       var ind = $(this).index();
       $("#parent").find(".cont").stop().fadeTo(600,0,function(){
           $('#parent').find('.cont').eq(ind).stop().fadeTo(300,1);
       });
    });
});

jQuery自定义滑块查询

1 个答案:

jsFiddle demo