单击Lightbox中的可见区域.角度和jQuery

Question

我有一个Lightbox的内容：

<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：将内部divs放在彼此顶部

（2） top:40px-仅在此示例中唯一的req： position:absolutedivs在按钮的顶部，因此没有此

，您就无法按下它们

$('#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>