web-dev-qa-db-ja.com

jQuery UIタブ、別のタブをクリックするとURLが更新されます

JQuery UIのタブを使用しています： http://jqueryui.com/demos/tabs/

ユーザーが別のタブをクリックしたときにブラウザの現在のURLを更新する方法：例：url.html＃tab-4と同時に、ブラウザの現在の履歴をプッシュします。

ありがとうございました！

jqueryjquery-uitabs
12
Jerome Ansia

これで必要なものが得られるはずです（バージョン1.9以降では jQuery UI 1.8 を使用し、 activate event を使用します。コード例については、他の回答を参照してください）。 jQueryUIデモでサンプルHTMLを使用しました。

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

jQuery UI 1.10以降では、showは廃止されてactivateになりました。また、idは無効なjQueryではなくなりました。代わりに.attr('id')を使用してください。最後に、on('tabsactivate')の代わりにbind()を使用します。

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

作成後の方法：

$("#myTabs").on( "tabsactivate", function(event, ui) {
    window.location.hash = ui.panel.id;
});

デモ： http://jsfiddle.net/RVHzV/

観察可能な結果： http://jsfiddle.net/RVHzV/show/light/

以前のバージョンのJQuery

タブ呼び出しにハンドラーを追加して、タブIDでロケーションハッシュを更新します。

$("#myTabs").tabs({
   // options ...
   show: function(event, ui) {
        window.location.hash = ui.panel.id;
   }
});

UIタブの作成後にこれを追加することもできます。

$("#myTabs").bind( "tabsshow", function(event, ui) {
        window.location.hash = ui.panel.id;
});

コードデモ： http://jsfiddle.net/jtbowden/ZsUBz/1/

観察可能な結果： http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/

35
Jeff B

まず、タブの変更時にハッシュを更新する必要があります（これは最新のjQueryUI用です）。

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

次に、ハッシュ変更のアクティブなタブを更新する必要があります（つまり、ブラウザの履歴、戻る/進むボタン、ユーザーがハッシュを手動で入力できるようにする）。

$(window).on('hashchange', function () {
  if (!location.hash) {
    $('#tabs').tabs('option', 'active', 0);
    return;
  }
  $('#tabs > ul > li > a').each(function (index, a) {
    if ($(a).attr('href') == location.hash) {
      $('#tabs').tabs('option', 'active', index);
    }
  });
});
3
Dejan Milosevic
$( "#tabs" ).tabs({            
        activate: function(event, ui) {
            //Key => random string
            //url => URL you want to set
            window.history.pushState({key:'url'},'','url');
        }
    });
2
Mukesh Rana

最初のタブをURLに表示するには、「アクティブ化」ではなく「作成」を使用する必要がありました。

    $('#tabs').tabs({
        create: function(event, ui) {
            window.location.hash = ui.panel.attr('id');
        }
    });

このソリューションはURLを変更するために機能しているようですが、URLに戻っても、タブが切り替わりません。そのURLがヒットしたときにタブを切り替えるように特別なことをする必要がありますか？

1
Billkamm

JQueryレスポンシブタブ内でこのメソッドを使用して、アクティブなタブでURLをハッシュしました。

$(function() {
       $('#tabs, #subtabs').responsiveTabs({
            activate: function(event, ui) {
            window.location.hash = $("ul li.r-tabs-state-active a").attr("href");
        },
        startCollapsed: 'accordion'
       });
});
0
Progrower

上記のJeffBの作業を基に構築しています...これはjQuery1.11.1で機能します。

$("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); // save current scroll position
            window.location.hash = ui.newPanel.attr('id'); // add hash to url
            $(window).scrollTop(scrollTop); // keep scroll at current position
    }
});
});
0
eleclair

ここでの他の答えの組み合わせは私のために働いた。

$( "#tabs" ).tabs({
    create: function(event, ui) {
        window.location.hash = ui.panel.attr('id');
    },
    activate: function(event, ui) {
        window.location.hash = ui.newPanel.attr('id');
    }
});
0
Rahul Desai