使用jQuery哈希无需书签即可更改网址 [英] Using jQuery hash to alter URL without bookmarking

问题描述

看起来允许用户浏览页面上的多个标签，但是当点击后退按钮时，返回到他们的上一页（不必通过他们的标签历史导航回去）。感觉就像我正在使用的方法一样（要么更改URL并处理历史记录，要么不更改URL，也不处理历史记录）。我研究过HTML历史API，它似乎并没有直接对此发表看法，也没有发现我发现的许多帖子。我希望我的Tabs可以链接，但不能作为浏览器的单独页面（我是否疯了？）。非常感谢你。

JavaScript

  //将标签ID添加到网址
 var hash = window.location.hash; 
 hash&& $（'ul.nav a [href =''+ hash +']'）。tab（'show'）; 
 $ b $（'。nav-tabs a'）。click（function（e）{
 $（this）.tab（'show'）; 
 window.location。 hash = this.hash; 
 
}）; 
  

HTML

 < div class =tabbable> 
< ul class =nav nav-tabs> 
< li>< a href =＃tab1data-toggle =tab>我的第一个标签页< / a>< / li> 
< li>< a href =＃tab2data-toggle =tab>我的第二个标签< / a>< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-pane activeid =tab1> 
< div id =ContentPaneTab1runat =server>< / div> 
< / div> 
< div class =tab-paneid =tab2> 
< div id =ContentPaneTab2runat =server>< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

如果您使用jQuery ui创建选项卡，您可以使用以下命令启动选项卡：

  $（#tabs）.tabs（{
 activate ：function（event，ui）{
 window.location.replace（'＃'+ $（ui.newPanel）.attr（'id'））; 
} 
}）; 
  

这会将新点击的＃添加到浏览器urkl无需将其添加到历史记录中

例子

Looking to allow user to nav through multiple Tabs on a page, but when hitting the back button, return to their previous page (not have to navigate back through their Tab history). It feels like one or the other with the method I'm using (either I change the URL and deal with the history, or I don't change the URL and don't deal with the history). I have looked into HTML History API, it doesn't seem to speak directly to this, nor do many of the posts I've found. I'd like my Tabs to be link-able to, but not act as separate pages to the browser (am I nuts?). Thank you very much.

JavaScript

//add tab id to url 
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');

$('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    window.location.hash = this.hash;

});

HTML

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li><a href="#tab1" data-toggle="tab">My First Tab</a></li>
        <li><a href="#tab2" data-toggle="tab">My Second Tab</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <div id="ContentPaneTab1" runat="server"></div>
        </div>
        <div class="tab-pane" id="tab2">
            <div id="ContentPaneTab2" runat="server"></div>
        </div>
    </div>
</div>

解决方案

If you are using jQuery ui to create the tabs, you can use the following to initiate the tabs:

$( "#tabs" ).tabs({
    activate: function(event, ui) {                   
        window.location.replace('#' + $(ui.newPanel).attr('id'));                     
    }
});

This will add the newly clicked # into the browser urkl without adding it to the history

Example

这篇关于使用jQuery哈希无需书签即可更改网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！