[解決済み] Twitter Bootstrapのタブ:ページの再読み込みやハイパーリンクで特定のタブに移動する
2022-03-14 01:59:39
質問
TwitterのBootstrapフレームワークとその BootstrapタブJS . いくつかの小さな問題を除いては、とてもうまく機能しています。そのうちの1つは、外部リンクから特定のタブに直接移動する方法がわからないことです。例えば、こんな感じです。
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
は、それぞれ「ホーム」タブと「ノート」タブに移動する必要があります 外部ページからのリンクがクリックされた場合
解決方法は?
遅ればせながら、この問題に対する私の解決策を紹介します。しかし、それは多分他の人の助けになることができます。
// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
$('.nav-tabs a[href="#' + hash + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
関連
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vueのフィルタの説明
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Twitter Bootstrap Form File Element Upload Button(ファイルアップロードボタン
-
[解決済み] Twitter Bootstrapを使った中央寄せのコンテンツはどうなっているのか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
JSアレイループと効率解析の比較
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
vueのグローバルがscss(mixin)を導入。
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
[解決済み] ドキュメントをジャンプさせずにwindow.location.hashを更新するにはどうすればよいですか?
-
[解決済み] ページのスクロールを伴わないlocation.hashの変更