Question

相当新的bootstrap ..我希望两个div相互重叠，内容不同，下面的链接分别切换它们。

但是我似乎无法正确定位div以允许它们在彼此之上淡入/淡出并且下方的按钮/链接不会移动。

这是一个jsFiddle。我似乎无法理解哪个选择器需要什么位置而不会弄乱引导代码。 https://jsfiddle.net/karlt/8zdotv7o/4/

＆＃13;

$(".toggle-people").on('click', function() {
  $(".people").fadeIn(1000);
  $(".projects").fadeOut(1000);
});

$(".toggle-projects").on('click', function() {
  $(".people").fadeOut(1000);
  $(".projects").fadeIn(1000);
});

＆＃13;

.people,
.projects {
  text-align: center;
}
.projects {
  background-color: #46f2e6;
}
.people {
  display: none;
  background-color: #e56767;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container-fluid">


  <div class="row">
    <div class="projects">
      <p>Project 1, Project 2, Project 3, Project, Project</p>
    </div>

    <div class="people">
      <p>Name 1, Name 2, Name 3, Name 4 , Name 5</p>
    </div>
  </div>


  <div class="row text-center">

    <div class="col-md-6">
      <a class="toggle-people">People</a>
    </div>

    <div class="col-md-6">
      <a class="toggle-projects">Projects<a/>
    </div>
     
</div>

＆＃13;

Answer 1

我通过一些更改来更新你的小提琴，以获得你所说的效果。

Fiddle

基本上我使用position:absolute让他们坐在同一个区域。希望能帮助到你。然而，这不是一个完美的响应，因为绝对定位会使元素与DOM中其他元素的顺序不一致。

Answer 2

1）将您的.people和.projects换成div。

2）将position:relative提供给此包装器。

3）将position:absolute提供给.projects和.people。

为什么？

因为当您将position:absolute提供给div时，它将相对于具有position的父div或者如果没有找到这样的父项而定位。

因此将position:relative提供给包装器是安全的。

这是fiddle。

Answer 3

您也可以保持相同的设计并为其添加延迟demo

    $(".toggle-people").on('click', function() {
   $(".projects").fadeOut(1000);
    $(".people").delay(1000).fadeIn(1000);

});

$(".toggle-projects").on('click', function() {
   $(".people").fadeOut(1000);
   $(".projects").delay(1000).fadeIn(1000);
});

fadeIn / FadeOut与引导程序（CSS）重叠div

3 个答案: