Question

我有一个包含缩略图的开放容器div。如果用户点击该缩略图div，则会出现具有相同索引的div命名框。

所以基本上我有以下结构：

<div id="open-container">
  <div class="boxA-open"></div>
  <div class="boxB-open"></div>
  <div class="boxC-open"></div>
</div>

<div class="box">
  <div class="profile"></div>
  <div class="data">
    <h1>Ipsum Lorum</h1>
    <h2>Ipsum Lorum</h2>
    <p>Ipsum Lorum</p>   
  </div>
</div>

<div class="box">
  <div class="profile"></div>
  <div class="data">
    <h1>Ipsum Lorum</h1>
    <h2>Ipsum Lorum</h2>
    <p>Ipsum Lorum</p>   
  </div>
</div>

<div class="box">
  <div class="profile"></div>
  <div class="data">
    <h1>Ipsum Lorum</h1>
    <h2>Ipsum Lorum</h2>
    <p>Ipsum Lorum</p>   
  </div>
</div>

老实说我还没有尝试过任何东西，因为我不知道如何在div之间设置所需的连接。

我的初始解决方案是为每个开箱课程设置3个点击事件，并使用nth-of-type定位框。编写相同的代码3次并不是那么优雅。

div的不透明度设置为0.如果框变为可见或“将出现”，则设置为1.

对于用户j08691：

$('div.box-open').click(function () {
    var timeline = new TimelineMax({paused:true});
    timeline.to($('.box').eq($(this).index()), 3,  {left:'6%', ease:Back.easeInOut})
    timeline.play();
})

Answer 1

你可以使用这个jQuery片段来完成它：

$('div.box-open').click(function () {
    $('.box').hide().eq($(this).index()).fadeIn();
})

将容器div类更改为box-open

＆＃13;

$('div.box-open').click(function () {
    $('.box').hide().eq($(this).index()).fadeIn();
})

＆＃13;

.box {
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="open-container">
    <div class="box-open">A</div>
    <div class="box-open">B</div>
    <div class="box-open">C</div>
</div>
<div class="box">
    <div class="profile"></div>
    <div class="data">
         <h1>Ipsum Lorum 1</h1>

         <h2>Ipsum Lorum</h2>

        <p>Ipsum Lorum</p>
    </div>
</div>
<div class="box">
    <div class="profile"></div>
    <div class="data">
         <h1>Ipsum Lorum 2</h1>

         <h2>Ipsum Lorum</h2>

        <p>Ipsum Lorum</p>
    </div>
</div>
<div class="box">
    <div class="profile"></div>
    <div class="data">
         <h1>Ipsum Lorum 3</h1>

         <h2>Ipsum Lorum</h2>

        <p>Ipsum Lorum</p>
    </div>
</div>

＆＃13;

Answer 2

我认为你可以对这个jsfiddle感兴趣：http://jsfiddle.net/syahrasi/Us8uc/

我认为你尝试做的事情与其他布局完全一致。

$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

Answer 3

$(".open-container div").on("click", function() {
    var index = $(this).index();
    $("div.box")[index].show();
});

Answer 4

这就是你想要的。

HTML代码

<div id="open-container">
 <div class="boxA-open">a</div>
 <div class="boxB-open">b</div>
 <div class="boxC-open">c</div>
</div>

<div class="box" data-box="boxA-open" style="display:none">
 <div class="profile"></div>
 <div class="data">
  <h1>Ipsum Lorum A</h1>
  <h2>Ipsum Lorum</h2>
  <p>Ipsum Lorum</p>   
  </div>
 </div>

<div class="box" data-box="boxB-open" style="display:none">
 <div class="profile"></div>
 <div class="data">
  <h1>Ipsum Lorum B</h1>
  <h2>Ipsum Lorum</h2>
  <p>Ipsum Lorum</p>   
 </div>

<div class="box" data-box="boxC-open" style="display:none">
  <div class="profile"></div>
   <div class="data">
   <h1>Ipsum Lorum C</h1>
   <h2>Ipsum Lorum</h2>
   <p>Ipsum Lorum</p>   
</div>
</div>

Js Code

$(document).ready(function() {
  $('.boxA-open, .boxB-open, .boxC-open').on('click', function(){
    var class_name = $(this).attr('class');
    $('.box').each(function(i,e){
      if($(this).data('box')==class_name){
        $(this).show();
      }
      else{
        $(this).hide();
      }
    });
    //console.log
  });
});

工作示例

Working example plunker

单击Div A会触发Div B并删除Div B的兄弟

4 个答案: