Html 创建打开/关闭图层的页面

我正在尝试创建一个带有图层打开和关闭选项的页面

有人知道怎么做这种页面吗

请让我知道， 谢谢

这里有一个

---

---

这是一组div，一个在另一个之上，一个简单的javascript打开和关闭它们，实际上通过按下按钮来改变它们的样式。在这里使用jquery将非常有用。谢谢你，我可以试试这个。但我无法让脚本正常工作。我可以看到按钮，但没有调用函数您是否在

部分包含jQuery库？如果没有，请在文档中的

标记之间添加此

。

<button class="on">Show All</button>
<button class="off">Hide All</button>
<button data-rel="one">One</button>
<button data-rel="two">Two</button>
<button data-rel="three">Three</button>

<div class="one layer"></div>
<div class="two layer"></div>
<div class="three layer"></div>

div {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 100px;
  left: 50%;
  margin-left: -250px;;
  opacity: 0.3;
}
button {
  width: 75px;
  margin-right: 15px;
}
.one {
  background: url(image1.png) 110px 0 no-repeat;
  background-size: 40px 40px;
}
.two {
  background: url(image2.png) 250px 150px no-repeat;
  background-size: 60px 60px;
}
.three {
  background: url(image3.png) 410px 310px no-repeat;
  background-size: 80px 80px;
}

$(function() {

  $('button').click(function() {

    var el = $('.'+$(this).data('rel'));

    if(el.css('opacity') === '1') {
       el.stop().animate({ opacity: '0.3' }, 300, 'linear');
    }
    else {
       el.stop().animate({ opacity: '1' }, 300, 'linear');
    }

  });

  $('.on').click(function() {
    $('.layer').stop().animate({ opacity: '1' }, 300, 'linear');    
  });

  $('.off').click(function() {
    $('.layer').stop().animate({ opacity: '0.3' }, 300, 'linear');    
  });

});