Javascript 单击选项卡时更新url，单击浏览器按钮时导航

我有一个非常简单的标签。单击选项卡标题时，我希望URL得到更新，如：

http:/somepath/demo-tabs/#tab2 or http:/somepath/demo-tabs/#tab3 

此外，我还希望在单击浏览器的“上一页”和“下一页”按钮时导航这些选项卡。这似乎也很有效。但关键是，每次单击选项卡时页面都会跳转。在所有其他东西都还在工作的情况下，如何停止页面跳转。i、 e URL得到更新，并在单击浏览器的“上一步”和“下一步”按钮时起作用

$(window).on("hashchange", function() {
 $("a[href='" + window.location.hash + "']").click();
});

上面是我使用的代码，这是我从上一个帖子问题中得到的。这使我的选项卡可以单击浏览器的“上一页”和“下一页”按钮。下面是tab和Jquery的HTML示例标记：

ul>
  <li><a href="#content1">Head 1</a></li>
  <li><a href="#content2">Head 2</a></li>
</ul>

<div class="content"> Some Content/........</div>
<div class="content"> Some Content/........</div> 

$(document).ready(function() {
var tabHead = $('ul li');
var tabContent = $('.content');

tabContent.not(':first').hide().end();
  tabHead.on('click',function() { 
    tabContent.hide().eq($(this).index()).show();
  });
});

ul>



一些内容/。。。。。。。。
一些内容/。。。。。。。。
$（文档）.ready（函数（）{
var tabHead=$（'ul li'）；
变量tabContent=$（'.content'）；
tabContent.not（“：first”）.hide（）.end（）；
tabHead.on（'click'，function（）{
tabContent.hide（）.eq（$（this.index（））.show（）；
});
});

我找到了'window.history.pushState'（“对象或字符串”，“标题”，“新url”）；关于研究。然而，你可以帮助我的来源或链接或演示如何实际使用它

我不想使用AJAX。只是简单的Jquery或JS