单击按钮时锚点隐藏 div

Anchor hidden div when button is clicked

我有三个按钮,它们都包含隐藏内容。单击按钮时,我希望显示该特定内容并隐藏所有其他内容。我还希望屏幕跳转到单击按钮时显示的内容。

我需要在 JavaScript 中添加什么才能使其跳转到内容?这是我拥有的:

$("#wrap div[id^='Template']").click(function() {
  var active = $(this).attr('id');
  $(this).siblings("[class^='Template']:not(." + active + ")").hide();
  $(this).siblings("." + active).slideToggle();
});
#Template2,
#Template3,
#Template4 {
  margin-top: 24px;
  margin-left: 19% !important;
  background-color: #cb3778;
  padding: 0 30px 0 30px;
  font-family: Arial;
  font-size: 20px;
  line-height: 36px;
  float: left;
  color: #FFF;
  cursor: pointer;
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
}
.Template2,
.Template3,
.Template4 {
  display: none;
  clear: both;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display: block;" id="wrap">

  <div id="Template2">Sample 2</div>
  <div id="Template3">Sample 3</div>
  <div id="Template4">Sample 4</div>

  <div align="center" style="padding-top:40px;" class="Template2">
    <br>
    <br>
    <br>
    <br>
    <br>sample demo txt two 2</div>
  <div align="center" style="padding-top:40px;" class="Template3">
    <br>
    <br>
    <br>
    <br>
    <br>sample demo txt two 3</div>
  <div align="center" style="padding-top:40px;" class="Template4">
    <br>
    <br>
    <br>
    <br>
    <br>sample demo txt two 4</div>
</div>

尝试将其添加到点击功能的末尾。

$("body, html").animate({
    scrollTop: $(this).siblings("." + active).position().top
});

用CSS:target伪class怎么样?参见:http://codepen.io/zvona/pen/YwdGrW

.content {
  visibility: hidden;  
}

.content:target {
  visibility: visible;
}