单击按钮时锚点隐藏 div

Question

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

我需要在 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>

Answer 1

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

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

Answer 2

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

.content {
  visibility: hidden;  
}

.content:target {
  visibility: visible;
}

单击按钮时锚点隐藏 div

Anchor hidden div when button is clicked

javascript

css

anchor

hidden-field