web-dev-qa-db-ja.com

Twitterのブートストラップタブ：ページの再読込みまたはハイパーリンクの特定のタブに移動する

私はTwitterのBootstrap Frameworkとそれらの Bootstrap Tabs JS を使っているWebページを開発しています。それはいくつかの小さな問題を除いて素晴らしい作品、その一つは私が外部リンクから特定のタブに直接行く方法がわからないということです。例えば：

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

[ホーム]タブと[メモ]タブにそれぞれ移動する必要があります 外部ページからリンクをクリックしたとき

javascripthtmltabstwitter-bootstrap
328
mraliks

これは私が抱えている問題に対する解決策で、おそらく少し遅れています。しかしそれは多分他人を助けることができる：

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})
548
dubbe

_ update _

ブートストラップ3の場合は、.on('shown', ...)を.on('shown.bs.tab', ....)に変更します。

これは @dubbe answerおよびこの SO承認済み回答 に基づいています。 window.scrollTo(0,0)が正しく動作しないという問題を処理します。問題は、表示されているタブのURLハッシュを置き換えると、ブラウザがそのハッシュをページ上の要素からスクロールすることです。これを回避するには、ハッシュが実際のページ要素を参照しないようにプレフィックスを追加します。

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

使用例

あなたがid = "mytab"のtab-paneを持っているなら、あなたはこのようにあなたのリンクを置く必要があります：

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>
206
flynfish

対応するタブリンクでclickイベントを発生させることができます。

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});
48
Marian Theisen

これはスクロールを防ぐdubbeのソリューションの改良された実装です。

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
} 

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})
42
Demircan Celebi

提供されているJavaScriptソリューションはうまくいくかもしれませんが、追加のJavaScriptを必要としないが、ビュー内にロジックを必要とするという少し異なる方法を取りました。次のように、標準のURLパラメータを使用してリンクを作成します。

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

その後、単純にactiveTabの値を検出して、適切な<li>に 'class = "active"'を書き込みます。

擬似コード（あなたの言語でそれに応じて実装してください）。注この例でパラメータが指定されていない場合は、[ホーム]タブをデフォルトのアクティブとして設定しています。

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>
18
Peter

ブートストラップ3の場合

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

https://jsfiddle.net/DTcHh/6638/

10
Razan Paul

私はif ...の大ファンではありません。だから私はもっと簡単なアプローチを取った。

$(document).ready(function(event) {
    $('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
    $('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
    $('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) {    // Update the location hash to current tab
        window.location.hash= event.target.hash;
    })
});
  1. デフォルトのタブを選ぶ（通常は最初のタブ）
  2. タブに切り替えます（そのような要素が実際に存在する場合は、jQueryに処理させます）。間違ったハッシュが指定されていても何も起こらない
  3. [オプション]別のタブが手動で選択された場合にハッシュを更新する

要求されたハッシュへのスクロールを扱いません。しかし すべき それ？

9
visitsb

これはBootstrap 3で動作し、同様にGarciaWebDevの回答を統合することでdubbeとflynfishの2つのトップアンサーを改善します（これはハッシュの後のurlパラメータを考慮し、github issue trackerのBootstrap作者から直接です）。

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
7
greggdavis

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

コーヒースクリプトで：

$(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);
    });
});
6
Sucrenoir

Demircan Celebiのソリューションを基盤としています。 URLを変更するときにタブを開き、サーバーからページをリロードしなくてもタブを開くことを望みました。

<script type="text/javascript">
    $(function() {
        openTabHash(); // for the initial page load
        window.addEventListener("hashchange", openTabHash, false); // for later changes to url
    });


    function openTabHash()
    {
        console.log('openTabHash');
        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
        } 

        // With HTML5 history API, we can easily prevent scrolling!
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            if(history.pushState) {
                history.pushState(null, null, e.target.hash); 
            } else {
                window.location.hash = e.target.hash; //Polyfill for old browsers
            }
        })
    }
</script>
6
Gavin
$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

http://github.com/Twitter/bootstrap/issues/2415#issuecomment-4450768 からのこのコードは完全に私のために働いた。

5
tomaszbak

あなたの意見を共有してくれてありがとう。

すべての解決策を読むことによって。私は以下のコードで後者の利用可能性に応じてURLハッシュまたはlocalStorageを使用する解決策を思いつきました：

$(function(){
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    })

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});
5
Vaibhav

ネストタブに使用する@flynfish + @Ztyxソリューション

    handleTabLinks();

    function handleTabLinks() {
        if(window.location.hash == '') {
            window.location.hash = window.location.hash + '#_';
        }
        var hash = window.location.hash.split('#')[1];
        var prefix = '_';
        var hpieces = hash.split('/');
        for (var i=0;i<hpieces.length;i++) {
            var domelid = hpieces[i].replace(prefix,'');
            var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
            if (domitem.length > 0) {
                domitem.tab('show');
            }
        }
        $('a[data-toggle=tab]').on('shown', function (e) {
            if ($(this).hasClass('nested')) {
                var nested = window.location.hash.split('/');
                window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
            } else {
                window.location.hash = e.target.hash.replace('#', '#' + prefix);
            }
        });
    }

子供はclass = "nested"を持つべきです

5
Artem Kashin

Bootstrapの作者が提供するコードを GitHubのissue tracker に使用することをお勧めします。

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

あなたは彼らがそれを支持することを選ばなかった理由についてのより多くの情報への問題へのリンクで見つけることができます。

4
Alejandro García Iglesias

これは私がしたことです、本当に簡単です、そしてあなたのタブリンクがそれらに関連したIDを持っているなら、あなたはhref属性を得て、タブ内容を示す関数にそれを渡すことができます：

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

それから、あなたのURLに次のようにハッシュを追加することができます。＃tab_tab1、 'tab_'部分はハッシュ自体から削除されますので、nav-tabsの実際のタブリンクのID（tabid1）がこの後に置かれます。 URLはwww.mydomain.com/index.php#tab_tabid1のようになります。

これは私にとって完璧に機能し、それが他の誰かに役立つことを願っています:-)

3
Derek Buntin

上で説明したいくつかの方法を試してみて、次のような実用的な解決策になってしまいました。コピーしてエディターに貼り付けてみてください。ハッシュを受信トレイ、送信トレイに変更してURLを作成し、Enterキーを押すだけでテストできます。

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

これがあなたの時間を節約することを願っています。

3
Abhimanyu

私はこれを機能させるためにいくつかのビットを変更しなければなりませんでした。 Bootstrap 3とjQuery 2を使用しています

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
2
ruifn

これはネストされたタブを処理するための私の解決策です。アクティブタブにアクティブにする親タブがあるかどうかをチェックする機能を追加しました。これが機能です。

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

そしてこのように呼ぶことができます（@ flynfishの解決策に基づく）：

var hash = document.location.hash;
var prefix = "";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
    activateParentTab(hash);
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

現時点では、この解決策は私にはうまく機能します。これが他の人に役立つことを願っています;）

2
Stefano Marra

私はこの問題を抱えていましたが、複数のタブレベルを処理する必要がありました。コードはかなり醜いです（コメントを見てください）、しかし、その仕事をします： https://Gist.github.com/JensRantil/4721860 願わくば誰かがそれを役に立つと思うでしょう（そしてより良い解決策を提案して自由に感じなさい！）.

1
Ztyx

このコードをあなたのページに挿入してください。

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});
1
Amin Gholibeigian

他の答えからの部分を組み合わせることは、ここに入れ子になったタブの多くのレベルを開くことができる解決策です：

// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
  var $link = $('[href=' + hash + ']');
  var parents = $link.parents('.tab-pane').get();
  $(parents.reverse()).each(function() {
    $('[href=#' + this.id + ']').tab('show') ;
  });
  $link.tab('show');
}
1
cweston

それが誰にとっても重要であるならば、以下のコードは小さくて完璧で、URLから単一のハッシュ値を得てそれを示すために働きます：

<script>
    window.onload = function () {
        let url = document.location.toString();
        let splitHash = url.split("#");
        document.getElementById(splitHash[1]).click();
    };
</script>

それがすることはそれがidを取得してclickイベントを発生させることです。簡単です。

0
Samim

私はajax #!#（eg/test.com#!#test3）とのリンクのためにこのようにsthを作ります、しかしあなたはそれをあなたが好きなように修正することができます

$(document).ready(function() {

       let hash = document.location.hash;
       let prefix = "!#";

       //change hash url on page reload
       if (hash) {
         $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
       } 

       // change hash url on switch tab
       $('.nav-tabs a').on('shown.bs.tab', function (e) {
          window.location.hash = e.target.hash.replace("#", "#" + prefix);
       });
 });

シンプルなページの例 Githubはこちら

0
eudaimonia

私はこのスレッドが非常に古くなっていることを知っています、しかし私はここに私自身の実装を残します

$(function () {
  // some initialization code

  addTabBehavior()
})

// Initialize events and change tab on first page load.
function addTabBehavior() {
  $('.nav-tabs a').on('show.bs.tab', e => {
    window.location.hash = e.target.hash.replace('nav-', '')
  })

  $(window).on('popstate', e => {
    changeTab()
  })

  changeTab()
}

// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
  const hash = getUrlHash()

  if (hash) {
    $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
  } else {
    $('.nav-tabs a').first().tab('show')
  }
}

// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
  return window.location.hash.slice(1)
}

ナビゲーションリンクにnav-クラスプレフィックスを使用していることに注意してください。

0
Renan Coelho