javascript - 单击时切换灯箱中的可见区域。 Angular 和 JQuery

Question

我有一个灯箱的内容:

<div id="light-box">

 <div id="first"> ..... </div>  //by default 

 <div id="second"> ..... </div> //hidden - but switches when button is clicked.

</div>

我想要同一个灯箱有两个按钮:

<a href="#first">........</a>
<a href="#second">........</a>

Answer 1

类似这样的事情可能会帮助您开始。要点是:

(1) position:absolute:将内部 DIV 置于彼此之上

(2) top:40px - 仅此示例需要:position:absolute div 位于按钮顶部，因此如果没有此<，则无法按下它们

$('#one').click(function(){
  $('#first').fadeIn();
  $('#second').fadeOut();
});
$('#two').click(function(){
  $('#first').fadeOut();
  $('#second').fadeIn();
});

#second{display:none;}
#first,#second{position:absolute;top:40px;left:0;padding:50px;}
/* top:40px req because pos:abs puts div overtop buttons! */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="light-box">
  <div id="first">
    <h2>First DIV</h2>
    <img src="http://placekitten.com/400/190" />
  </div>  
  <div id="second">
    <h2>Second DIV</h2>
    <img src="http://placekitten.com/400/200" />
  </div> 
  <button id="one">Show One</button>
  <button id="two">Show Two</button>
</div>