ブートストラップ3:ページの更新時に選択したタブを保持する


120

Bootstrap 3での更新時に、選択したタブをアクティブにしておこうとしています。試して確認したところ、いくつかの質問はすでにここで尋ねられましたが、私にとっては何の作業もありませんでした。どこが間違っているのかわからない。これが私のコードです

HTML

<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
    <li><a href="#career-path" data-toggle="tab">Career Path</a></li>
    <li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->

<div class="tab-content">
    <div class="tab-pane active" id="personal-info">
        tab data here...
    </div>

    <div class="tab-pane" id="Employment-info">
        tab data here...
    </div>

    <div class="tab-pane" id="career-path">
        tab data here...
    </div>

    <div class="tab-pane" id="warnings">
        tab data here...
    </div>
</div>

JavaScript

// tab
$('#rowTab a:first').tab('show');

//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('selectedTab', $(e.target).attr('id'));
});

//go to the latest tab, if it exists:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
  $('#'+selectedTab).tab('show');
}

機能しない理由は、選択されたタブを保存していないためです。私が行ったときconsole.log("selectedTab::"+selectedTab);、私が得ました:selectedTab::undefined。そのため、適用したロジックは正しくありません
ダークナイト

だから私に何をすべきかを教えてくれませんか?
Code Lover、

私はそれを修正しようとしています。もしそうなら、私はあなたのためにここに答えを投稿します
ダークナイト

私はそれを感謝します..助けてくれてありがとう..
Code Lover

これはうまくいくと思います:jsbin.com/UNuYoHE/2/edit。それが私に知らせてくれるなら、私は答えをはっきりと投稿します。また、divタブのテキストを確認することもできます。クリックしても適切な応答が得られません。たとえば、tab4をクリックすると、tab1のテキストが表示されます。
ダークナイト

回答:


187

選択したタブをウィンドウのハッシュ値に保存することを好みます。これにより、「同じ」ページを見る同僚にリンクを送信することもできます。トリックは、別のタブが選択されたときに場所のハッシュを変更することです。ページですでに#を使用している場合は、ハッシュタグを分割する必要があります。私のアプリでは、ハッシュ値の区切り文字として「:」を使用しています。

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">home</div>
  <div class="tab-pane" id="profile">profile</div>
  <div class="tab-pane" id="messages">messages</div>
  <div class="tab-pane" id="settings">settings</div>
</div>

JavaScriptは、上記の<script>...</script>一部に埋め込む必要があります。

$('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
  window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

スクリプトセクションでは、セミコロンをe.preventDefault();and の最後に追加する必要があります$(this).tab('show');
Sean Adams-Hiett

12
残念ながら、ブラウザをクリックすると、タブのコンテンツにジャンプします。これは、window.location.hash値を設定するときのデフォルトの動作です。別の方法としては、push.stateを使用することもできますが、IE <= 9のポリフィルが必要です。詳細および他の代替ソリューションについては、stackoverflow.com / questions / 3870057 /…を
Philipp Michael

3
要素をクリックしたときに、問題のIDへの「偽のスクロール」を防ぐ方法はありますか?
Patrice Poliquin 16

1
スクロールは、タブページに割り当てられたIDが原因です。セマンティックIDを使用してハッシュをマングルする(つまり、プレフィックス/サフィックスを追加する)場合、有効なIDとして認識されず、スクロールは行われません。これで答えが広がります。
Alex Mazzariol 2017

1
@koppor動作しますが、他の保存されたタブに直接(リンク経由で)ジャンプすると、ホームタブまたは最初のタブがリンクのタブにジャンプする前に、約1秒ですばやく表示されます。最初のタブが表示されないようにするためのアイデアタブは必要ないので?
mboy

135

これは私が試した中で最高のものです:

$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle='tab']", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
});

20
これは、受け入れられているソリューションよりもうまく機能します(つまり、コピー&ペーストがうまくいきます:D)
Cyril Duchon-Doris '12 / 10/12

3
これまでで最高のコピーと貼り付け:P
Ghostff '10 / 10/18

1
セレクターをに変更した"a[data-toggle=tab]"方が良いと思います。セレクターの記述方法は、たとえばモーダルを開くためのリンクをクリックしたときにブラウザーのURLも変更するようになりました。
leifdenby 2015年

5
'a [href = "' + location.hash + '"]'のように、セレクターに文字列ブラケットを追加することができます。構文エラーに遭遇しました。
asdacap 2016

1
これはそのままされ使用ブートストラップドロップダウン(と競合使用してdata-toggle="dropdown"。そして私は1つの場合には、タブと同じページに持って起こるどのように誰かがちょうど置き換え、ここで提案$(document.body).on("click", "a[data-toggle]", function(event) {して$(document.body).on("click", "a[data-toggle='tab']", function(event) {。私のためのトリックをやった
Jiveman

44

他の回答の組み合わせ:

  • クリックしてもジャンプしない
  • 場所のハッシュに保存
  • localStorageに保存(例:フォーム送信用)
  • コピーして貼り付けてください;)

    if (location.hash) {
      $('a[href=\'' + location.hash + '\']').tab('show');
    }
    var activeTab = localStorage.getItem('activeTab');
    if (activeTab) {
      $('a[href="' + activeTab + '"]').tab('show');
    }
    
    $('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
      e.preventDefault()
      var tab_name = this.getAttribute('href')
      if (history.pushState) {
        history.pushState(null, null, tab_name)
      }
      else {
        location.hash = tab_name
      }
      localStorage.setItem('activeTab', tab_name)
    
      $(this).tab('show');
      return false;
    });
    $(window).on('popstate', function () {
      var anchor = location.hash ||
        $('a[data-toggle=\'tab\']').first().attr('href');
      $('a[href=\'' + anchor + '\']').tab('show');
    });

1
私は他の解決策を最初に試しました-これが一番うまくいきます!
tdc

2
私が多くの異なるものから試してきた最良の解決策。タブのコンテンツにジャンプするのは面倒
でした

4
コンテンツのジャンプはこの答えでまだあります
shazyriver 2017

2
優れたソリューション:コピー、貼り付け、昼食に行く。いいね。
ゲイリースタントン

1
これまでで最高のソリューション
幸運な

19

Xaviのコードはほぼ完全に機能していました。しかし、別のページに移動してフォームを送信すると、タブが含まれているページにリダイレクトされて、保存されたタブがまったく読み込まれませんでした。

救助のためのlocalStorage(Nguyenのコードをわずかに変更):

$('a[data-toggle="tab"]').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

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

var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab != null) {
    $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
}

2
これは金です!モーダルでも動作します!すばらしい答えです。
LechOsiński2017年

2
このコードは素晴らしく、ユーザーがサイトを離れて(セッションを終了して)後で戻ってきた場合でもタブを選択したままにしたい場合に最適です。現在のセッションの間のみ選択を保持し、次のセッションのデフォルトタブに戻すには、「localStorage」の2つのインスタンスを「sessionStorage」に置き換えます。
Gary.Ray 2017年

Bootstrap 4で適切に機能する、短くて甘いコピー/貼り付けソリューション
CFPサポート

すごい素晴らしいソリューション!
ジラニA

1
[data-toggle="pill"]錠剤用
mxmissile

12

これはHTML5 localStorageを使用してアクティブなタブを保存します

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
   $('#navtab-container a[href="' + activeTab + '"]').tab('show');
}

ref:http : //www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php https://www.w3schools.com/bootstrap /bootstrap_ref_js_tab.asp


これはいいですが、欠点は、アクティブなタブでリンクを共有できないことです
lfender6445

これはいいです。利点は、 "window.location.hash"がURLのhttpリクエストパラメータにハッシュ値を追加することで衝突が発生し、ページネーションなどの他のhttpリクエストによって読み取られる不正なパラメータが問題とならないことです
Dung

4

が提供する回答に自分自身を基づかシャビ・マルティネスkoppor I後者の可用性に応じて、URLのハッシュかのlocalStorageを使用して解決策を考え出しました:

function rememberTabSelection(tabPaneSelector, useHash) {
    var key = 'selectedTabFor' + tabPaneSelector;
    if(get(key)) 
        $(tabPaneSelector).find('a[href=' + get(key) + ']').tab('show');

    $(tabPaneSelector).on("click", 'a[data-toggle]', function(event) {
        set(key, this.getAttribute('href'));
    }); 

    function get(key) {
        return useHash ? location.hash: localStorage.getItem(key);
    }

    function set(key, value){
        if(useHash)
            location.hash = value;
        else
            localStorage.setItem(key, value);
    }
}

使用法:

$(document).ready(function () {
    rememberTabSelection('#rowTab', !localStorage);
    // Do Work...
});

XaviMartínezのソリューションの場合のように、戻るボタンに追いつきません。


4

私のコード、それは私のために働き、私はlocalStorageHTML5 を使用

$('#tabHistory  a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});
$("ul.nav-tabs#tabHistory > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href");
  localStorage.setItem('selectedTab', id)
});
var selectedTab = localStorage.getItem('selectedTab');
$('#tabHistory a[href="' + selectedTab + '"]').tab('show');

4

私はこれを試してみましたが動作します:(これを、使用している錠剤またはタブに置き換えください)

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

        // Here, save the index to which the tab corresponds. You can see it 
        // in the chrome dev tool.
        var activeTab = localStorage.getItem('activeTab');

        // In the console you will be shown the tab where you made the last 
        // click and the save to "activeTab". I leave the console for you to 
        // see. And when you refresh the browser, the last one where you 
        // clicked will be active.
        console.log(activeTab);

        if (activeTab) {
           jQuery('a[href="' + activeTab + '"]').tab('show');
        }
    });

誰かのお役に立てば幸いです。

これが結果です:https : //jsfiddle.net/neilbannet/ego1ncr5/5/


4

ええと、これはすでに2018年ですが、(テレビ番組のタイトルのように)遅くなることはないと思います(笑)。ここに、私の論文中に作成したjQueryコードがあります。

<script type="text/javascript">
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.affectedDiv.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
});
</script>

ブートストラップタブのコードは次のとおりです。

<div class="affectedDiv">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
        <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
        <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <h3>Section A</h3>
            <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>Section B</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <h3>Section C</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
    </div>
</div>


ブートストラップやその他の基本的なものを呼び出すことを忘れないでください 

ここにあなたのためのクイックコードがあります:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


それでは説明に行きましょう:

上記の例のjQueryコードは、jQuery .attr()メソッドを使用して新しいタブが表示されたときに要素のhref属性値を取得し、HTML5 localStorageオブジェクトを介してユーザーのブラウザーにローカルに保存します。その後、ユーザーがページを更新すると、このデータが取得され、.tab( 'show')メソッドを介して関連するタブがアクティブになります。

いくつかの例を探していますか?ここにあなたのためのものです... https://jsfiddle.net/Wineson123/brseabdr/

私の答えがあなたを助ける一助になれば幸いです。:)


2

コメントはまだできないので、上から回答をコピーしたので、本当に助かりました。しかし、#idの代わりにcookieで動作するように変更したので、変更を共有したかった。これにより、アクティブなタブを1回の更新よりも長く保存できます(複数のリダイレクトなど)、またはIDがすでに使用されていて、koppors分割メソッドを実装したくない場合。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane" id="profile">profile</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>

<script>
$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    $.cookie('activeTab', id);
});

    // on load of the page: switch to the currently selected tab
    var hash = $.cookie('activeTab');
    if (hash != null) {
        $('#myTab a[href="#' + hash + '"]').tab('show');
    }
</script>

更新していただきありがとうございます。実際には私はそのような解決策を探していましたが、望んでいたよりも、@ kopporの回答しか得られませんでした。実際、これはバック機能を使用したい場合に最適な方法の1つです。アップデートをありがとう
コード

2

XaviMartínezが提供するコードを試してみました。IE7では機能しませんでした。問題は、タブが関連するコンテンツを参照しないことです。
だから、私はその問題を解決するためにこのコードを好む。

function pageLoad() {
  $(document).ready(function() {

    var tabCookieName = "ui-tabs-1"; //cookie name
    var location = $.cookie(tabCookieName); //take tab's href

    if (location) {
      $('#Tabs a[href="' + location + '"]').tab('show'); //activate tab
    }

    $('#Tabs a').click(function(e) {
      e.preventDefault()
      $(this).tab('show')
    })

    //when content is alredy shown - event activate 
    $('#Tabs a').on('shown.bs.tab', function(e) {
      location = e.target.hash; // take current href
      $.cookie(tabCookieName, location, {
        path: '/'
      }); //write href in cookie
    })
  });
};

これはいいですが、欠点は、アクティブなタブでリンクを共有できないことです
lfender6445

1

共有いただきありがとうございます。

すべてのソリューションを読むことによって。以下のコードで後者の可用性に応じて、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');
    }
});

1

Bootstrap v4.3.1の場合。以下をお試しください:

$(document).ready(function() {
    var pathname = window.location.pathname; //get the path of current page
    $('.navbar-nav > li > a[href="'+pathname+'"]').parent().addClass('active');
})

0

html5を使用して私はこれを作りました:

ページの一部:

<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>

ビューバッグには、ページ/要素のIDのみが含まれている必要があります。例: "testing"

私はsite.jsを作成し、ページにスクリプトを追加しました:

/// <reference path="../jquery-2.1.0.js" />
$(document).ready(
  function() {
    var setactive = $("#heading").data("activetab");
    var a = $('#' + setactive).addClass("active");
  }
)

今あなたがしなければならないすべてはあなたのnavbarにあなたのIDを追加することです。例えば。:

<ul class="nav navbar-nav">
  <li **id="testing" **>
    @Html.ActionLink("Lalala", "MyAction", "MyController")
  </li>
</ul>

すべてはデータ属性を呼びかけます:)


0

シャビ・マルティネスの答えに加えて、クリックのジャンプを回避

ジャンプを避ける

$(document).ready(function(){

    // show active tab

    if(location.hash) {

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

    // set hash on click without jumb

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// set hash on popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    $('a[href=' + anchor + ']').tab('show');
});

ネストされたタブ

区切り文字として「_」文字を使用した実装

$(document).ready(function(){

    // show active tab

    if(location.hash) {

        var tabs = location.hash.substring(1).split('_');

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });         

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

    // set hash on click without jumb

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        var tabs = location.hash.substring(1).split('_');

        //console.log(tabs);

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// set hash on popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    var tabs = anchor.substring(1).split('_');

    $.each(tabs,function(n){

        $('a[href=#' + tabs[n] + ']').tab('show');
    });

    $('a[href=' + anchor + ']').tab('show');
});

0

jqueryトリガーを使用して、スクリプトがボタンを押すようにオンロードしました

$( "。class_name")。trigger( 'click');


0

すごい、これを行うには多くの方法があります。私はこれを思いつきました、短くてシンプルです。これが他の人を助けることを願っています。

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

  $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    if(e.target.hash == "#activity"){
      $('.nano').nanoScroller();
    }
  })

0

ページをリロードし、予想されるタブを選択したままにした後の解決策があります。

データを保存した後、リダイレクトされたURLがmy_url#tab_2であるとします。

これで、次のスクリプトを実行しても、予想されるタブが選択されたままになります。

$(document).ready(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        $('.nav-tabs a').removeClass('active');
    }
});

アンカータグに自動的に割り当てられるアクティブクラスがあるため、$( '。nav-tabs a')。removeClass( 'active');によって削除されます。このスクリプト。
Hasib Kamal
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.