点击Div A触发Div B并移除Div B的兄弟姐妹

Clicking on Div A triggers Div B and removes siblings of Div B

本文关键字：Div 兄弟姐妹 触发 点击      更新时间：2023-09-26

我有一个打开的容器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个点击事件，并使用第n个类型来定位盒子。不过，将相同的代码写三次并不那么优雅。

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

您可以使用以下jQuery:片段

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

将容器div类更改为仅box-open

$('div.box-open').click(function () {
    $('.box').hide().eq($(this).index()).fadeIn();
})
.box {
    display:none;
}
<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>

我想你会对这个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();
    });
});

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

你想要这样吗。

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代码

$(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
  });
});

工作示例

工作示例plunker

相关文章：