1. ホーム
  2. javascript

[解決済み] twitter bootstrapでページを再読み込みしても現在のタブをアクティブに保つにはどうしたらいいですか?

2023-04-30 22:46:13

質問

現在、Twitter Bootstrapでタブを使用していますが、ユーザーがデータを投稿してページが再読み込みされた後、同じタブを選択したいです。

これはどのように行うのですか?

現在、私が行っているタブのintiの呼び出しは次のようなものです。

<script type="text/javascript">

$(document).ready(function() {

    $('#profileTabs a:first').tab('show');
});
</script>

私のタブ

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>

どのように解決するのですか?

localStorageまたはクッキーを使用して管理する必要があります。以下は、大幅に改善できる簡単で汚い解決策ですが、出発点を与えてくれるかもしれません。

$(function() { 
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use '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('lastTab', $(this).attr('href'));
    });

    // go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});