單擊按鈕時隱藏錨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偽類。 請參閱： http ： //codepen.io/zvona/pen/YwdGrW

.content {
  visibility: hidden;  
}

.content:target {
  visibility: visible;
}