web-dev-qa-db-ja.com

jquery UIタブでlocation.hashを変更する

Window.location.hashを Jquery UI Tabs で現在選択されているタブに変更する方法を見つけようとしています。

私はもう試した：

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
window.location.hash = ui.tab;
})

これにより、タブが変更されたときにハッシュが#undefinedに変更されます。

私も試しました：

$("#tabs > ul").tabs({ 
select: function(event, ui) { 
window.location.hash = ui.tab }
});

しかし、これはまったくトリガーされないようです。

任意の助けをいただければ幸いです。ありがとう。

編集：私の最初の問題の一部は、これと干渉する他のどこかのjsと関係があるように見えます。受け入れられた回答と、わずかに変更された他の提案された回答の両方が機能します。皆さんありがとう。

jqueryjquery-uitabsfragment-identifier
47
Rob

イベントハンドラー関数でui.tabはアンカー要素です。次のようにハッシュ値を取得できます。

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
    window.location.hash = ui.tab.hash;
})

これはあなたのために働きますか？

49
Serxipc
$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});
25
Herman van der Meulen

上記のソリューションの一部は機能しますが、window.location.hash APIはページの特定の部分を表示するように設計されているため、場合によってはページをジャンプさせます。

このきちんとした解決策が提案されました here 、その問題を解決します

  $("#tabs").bind("tabsshow", function(event, ui) { 
    history.pushState(null, null, ui.tab.hash);
  });
14
n8vision

これは私にとってはうまくいきました、jQuery UI 1.10：

$('#elexumaps_events_tabs').tabs({
    activate: function(event, ui) { 
       window.location.hash=ui.newPanel.selector; 
    }
});

参照： http://api.jqueryui.com/tabs/#event-activate

8
romaninsh

ジャンプしない私の簡単な解決策：

    $("#tabs").tabs({
        activate: function (event, ui) {
            var scrollPos = $(window).scrollTop();
            window.location.hash = ui.newPanel.selector;
            $(window).scrollTop(scrollPos);
        }
    });
6
Arthur

これがあなたの目的でしょうか？

$("#tabs > ul").tabs({ 
   select: function(event, ui) 
   { 
      window.location = "#" + ui.tab;
   }
});
4
hunter
$('#tabs').tabs({
    select: function(event, ui){
      window.location = ui.tab.href;
    }
});
3
warden

上記の回答の多くは、現在のバージョンのjQuery UIタブでは機能しません。私が現在使用しているものは次のとおりです。

var tabsUi = $('#tabs');
tabsUi.tabs();

// Add hash to URL when tabs are clicked
tabsUi.find('> ul a').click(function() {
    history.pushState(null, null, $(this).attr('href'));
});

// Switch to correct tab when URL changes (back/forward browser buttons)
$(window).bind('hashchange', function() {
    if (location.hash !== '') {
        var tabNum = $('a[href=' + location.hash + ']').parent().index();
        tabsUi.tabs('option', 'active', tabNum);
    } else {
        tabsUi.tabs('option', 'active', 0);
    }
});
3
Thomas Higginbotham

JQuery UI 1.10.3への道

$("#tabs").tabs({
   beforeActivate: function(event, ui) {
        var hash = ui.newTab.children("li a").attr("href");
        window.location.hash = hash;
   }
});
3
QuiGonJin2

私はあなたがgithubでそれを見つけることができるタブプラグインを使用しています： https://github.com/jquerytools/jquerytools.github.com

1
FDisk

他のいくつかの質問とjQueryUI APIドキュメントに目を通した後、これが私にとってはうまくいくことがわかりました。

$(document).ready(function() {
    $("#tabs").tabs({
        activate: function( event, ui ) {
            location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1);
        }
    });
});
1
Sean

これはJquery 1.8を使用してうまくいきました

$('#tabs').tabs({
    activate: function(event, ui) {
       window.location.hash = ui.newPanel.attr('id');
    }
});
1
Andrew

次のコードは私のために働いています..

$("#tabs").tabs({
   activate : function(event, ui) {
     window.location.hash = ui.newPanel[0].id;
  }
});
0
Sunil S

このコードは私のために大丈夫です：

$('#tabs').tabs({
    select: function(event, ui) { 
        window.location = $(ui.tab).attr('href');
    }
});
0
pucheta

Ui.tab自体は有効な文字列を返さないようです。 （代わりにundefinedを返しますので、何も返さないと言います。）

Ui.jquery.jsの開発版を見てみてください。そこに何かリターンがあるかどうか、おそらくui.tabの子を呼び出す必要があります;-)

0
Fabdrol

このコードは私のために働く：

$("#tabs").tabs({
    activate: function(event, ui) { 
       window.location.hash=ui.newPanel.selector; 
    }
});
0
Gabriel-Antoine Brouze