web-dev-qa-db-ja.com

Twitter bootstrapタブを永続化する最良の方法

これらのタブを保持する最良の方法は何ですか？

http://Twitter.github.com/bootstrap/javascript.html#tabs

コンテキストを追加するために、これはRailsアプリケーション用です。配列[tab1、tab2]をビューに渡し、両方のタブをレンダリングし、bootstrap tabプラグインを使用して表示を切り替えます。

jquerytabstwitter-bootstrap
44
DanS

このコードは、＃hashに応じて右のタブを選択し、タブがクリックされたときに右の#hashを追加します。 （これはjqueryを使用します）

Coffeescriptで：

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

またはJSで：

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});
83
Sucrenoir

ここでベストアンサーを改善したかったのです。

クレジットはSucrenoirにありますが、タブを変更するときにページにジャンプしないようにするには、この改善されたコードを使用します。

$(document).ready(function() {
    // show active tab on reload
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');

    // remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
       } else {
            location.hash = '#'+$(e.target).attr('href').substr(1);
       }
    });
});
35
d-wade

ここに問題を解決する別の方法があります。

最初にクリックイベントに行を追加して、アドレスバーにハッシュを表示します

$('#myTab').on('click', 'a', function (e) {
  e.preventDefault();
  // add this line
  window.location.hash = $(this).attr('href');
  $(this).tab('show');
})

次に、この部分をドキュメントの準備ができた呼び出しに追加して、右のタブがアクティブになっていることを確認してくださいonload。

if(window.location.hash){
   $('#myTab').find('a[href="'+window.location.hash+'"]').tab('show');
}

一緒にこれを書くことができます：

// cache the id
var navbox = $('#myTab');
// activate tab on click
navbox.on('click', 'a', function (e) {
  var $this = $(this);
  // prevent the Default behavior
  e.preventDefault();
  // set the hash to the address bar
  window.location.hash = $this.attr('href');
  // activate the clicked tab
  $this.tab('show');
})

// if we have a hash in the address bar
if(window.location.hash){
  // show right tab on load (read hash from address bar)
  navbox.find('a[href="'+window.location.hash+'"]').tab('show');
}
14
HaNdTriX

ここで最高の2つの答えを改善したかったのです。

クレジットは、スクレノワールとdウェイドになります。

コードでは履歴APIが使用されているため、onchangehash（ https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange ）は使用できません。このコードは、戻るボタンの機能を追加します（ https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate ）。

// show active tab on reload
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
// remember the hash in the URL without jumping
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    if(history.pushState) {
        history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
    } else {
        location.hash = '#'+$(e.target).attr('href').substr(1);
    }
});
// remember to back button
window.onpopstate = function(e) {
    $('a[href="' + location.hash + '"]').tab('show');
};
6
Pavel Berka

タブクリックを履歴に追加したくないが、ページを上下にジャンプさせたくない場合の別の修正バージョン：

$(document).ready(function () {

  if (location.hash !== '') {
    $('a[href="' + location.hash + '"]').tab('show');
  }

  $("a[data-toggle='tab']").on("shown.bs.tab", function (e) {
    var hash = $(e.target).attr("href");
    if (hash.substr(0,1) == "#") {
      var position = $(window).scrollTop();
      location.replace("#" + hash.substr(1));
      $(window).scrollTop(position);
    }
  });

});
1
Greg Houston

DOMのロード後に次のコードを実行します。

$('a[data-toggle=tab]').on('click', function () {
    history.pushState(null, null, $(this).attr('href'));
});


if (window.location.hash) {
    $('a[data-toggle=tab][href="' + window.location.hash + '"]').tab('show');
}

ただし、現在アクティブなタブが最初に表示され、次にlocation.hashからタブに切り替えられるため、UIエクスペリエンスが低下します。

1
Artur Beljajev

ロード時に#を使用してURLフラグメント（window.location.hashの後のURLの一部）を取得し、そのタブを表示可能に設定します。

if (window.location.hash) {
    $(window.location.hash).tab('show')
}
1
Rory McCrossan

Bootstrap 4、履歴プッシュなしのミニマリスト（2行）コードでテストされました。nav-tabsを含むすべてのページで機能します。

<script type="text/javascript">
$(document).ready(function(){
    // store the currently selected tab in the hash value
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { location.replace($(e.target).attr("href")); });
    // switch to the currently selected tab when loading the page
    $('.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
});
</script>
1
Awsom3D