[解決済み] 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');
}
});
関連
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Twitter Bootstrapのタブ:ページの再読み込みやハイパーリンクで特定のタブに移動する
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] Bootstrap 3: ページ更新時に選択したタブを保持する
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] CORS: 認証モードは 'include' です。