通过 jQuery 显示页面内容时的可共享 URL

Question

我正在开发一个静态网页，当单击按钮时，它会隐藏/显示内容的特定部分(我应该提到我对jQuery很陌生(。

截至目前，无法通过URL直接访问部分。有没有办法实现这一目标？

例如，访问 http://www.mypage.com/#contact 将自动显示相应的部分/div(并隐藏所有其他部分/div(。

谢谢！

.HTML：

<a href="#home" id="button_home">Home</a>
<a href="#contact" id="button_contact">Contact</a> 
<div id="section_home">some text</div>
<div id="section_contact">some text</div>

j查询：

   $(document).ready(function(){
      $("#button_home").click(function(){
          $("#section_home").addClass("visible");
          $("#section_contact").removeClass("visible");
      });
      $("#button_contact").click(function(){
          $("#section_home").removeClass("visible");
          $("#section_contact").addClass("visible");
      });
   });

Answer 1

检查这个小提琴 https://jsfiddle.net/s4Ljw9zo/

这是你要找的吗？

$(document).ready(function(){
      $("#button_home").click(function(){
          $("#section_home").addClass("visible");
          $("#section_contact").removeClass("visible");
      });
      $("#button_contact").click(function(){
          $("#section_home").removeClass("visible");
          $("#section_contact").addClass("visible");
      });
   });

.section{
  display: none;
}
.section.visible{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#home" id="button_home">Home</a>
<a href="#contact" id="button_contact">Contact</a> 
<div class="section" id="section_home">Section Home</div>
<div class="section" id="section_contact">Section Contact</div>