Question

我有一个非常简单的Tab。点击Tab Head我希望URL更新如下：

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

我希望在单击浏览器的上一页和下一页按钮时导航这些选项卡。这似乎也很好。但关键是每次单击选项卡时页面都会跳转。如何在所有其他内容仍然有效的情况下停止跳转页面。即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();
  });
});

我找到了`window.history.pushState（“object or string”，“Title”，“/ new-url”）;研究。但是，您可以帮我提供有关如何实际使用它的来源或链接或演示。

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

在单击选项卡上更新URL并单击浏览器按钮导航

0 个答案: