質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1447閲覧

URLのフラグメント識別子(#)を取得して、特定のタブにリンクする方法

TakahashiManabu

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/03/04 03:40

編集2018/03/04 09:55

お世話になります。

現在あるシステムの構築をしており、その中で、あるページの特定のタブへ直接リンクさせるのに苦労しております。
例えば、リンク元(ページA)にあるリンクをクリックすると、リンク先(ページB)のタブ(例えばここでは#tab4と呼ぶことにします)を表示する、という具合です。

現在採用しているやり方としては、以下のスクリプトをソースに挿入しています。
HTML部分 (ナビゲーションとそれに対応するタブコンテンツ部分のみ)

<nav> <ul class="nav nav-tabs"> <li class="nav-item"><a href="#tab1" class="nav-link navbar-default" data-toggle="tab">タブ1</a></li> <li class="nav-item"><a href="#tab2" class="nav-link navbar-default" data-toggle="tab">タブ2</a></li> <li class="nav-item"><a href="#tab3" class="nav-link navbar-default" data-toggle="tab">タブ3</a></li> <li class="nav-item"><a href="#tab4" class="nav-link navbar-default" data-toggle="tab">タブ4</a></li> </ul> </nav> <!--タブのコンテンツ部分--> <div class="tab-content px-5 bg-white"> <div id="tab1" class="tab-pane"> タブ1の表示 </div> <div id="tab2" class="tab-pane"> タブ2の表示 </div> <div id="tab3" class="tab-pane"> タブ3の表示 </div> <div id="tab4" class="tab-pane"> タブ4の表示 </div>

【追記】ちなみに、このHTMLにはBootstrap JSを利用しています。
https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

jQuery部分

<script> $(document).ready(function() { // #(ハッシュ)指定されたタブを表示する var hashTabName = document.location.hash; console.log(hashTabName); $('.nav-tabs a[href="+hashTabName+"]').tab('show'); }); </script>

ご存知かもしれませんが、上記のソースは、リンク先のページを指し示すURLには予めハッシュが付されており、リンク先のページではそれを取得したうえで変数hashTabNameに代入し、HTMLのクラス(nav-tabs)のa要素(a href)と適合するタブを表示する、というものです。

ところが、これを実行しても、ハッシュで指定したタブ画面を表示することができないでおります。試しに、hashTabNameに直接#tab4と入力して実行すると正常に機能します。
であれば、hashTabNameに値が入っていないのかもしれないと思い、console.logも加えて実行したところ、その変数の値には#tab4が代入されており、この点は問題なさそうです。

そうすると、コードのうち、

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

の部分において、変数が評価されているのか等に絞り込んでいるのですが、その後一向に改善に進みません。

大変恐れ入りますが、どなたか、この点のさらなる原因究明にお知恵をお貸し頂きたく、ご教示いただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/03/04 03:42

HTML部分も質問文に追記してください。
kei344

2018/03/04 06:16

「tab」は何らかのライブラリを使用されていますよね?プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
guest

回答2

0

js

1// $('.nav-tabs a[href="+hashTabName+"]').tab('show'); 2// ↓ ↓ 3 $('.nav-tabs a[href="'+hashTabName+'"]').tab('show');

投稿2018/03/04 10:10

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TakahashiManabu

2018/03/04 10:13

Kei344様、どうも有難う御座います。 私も先ほど自己解決致しました。お手数をおかけいたしました。 今後ともどうぞ宜しくお願い致します。
guest

0

自己解決

解決致しました。ご尽力下さいました皆様、有難う御座います。

以下、解決方法

結論:jQueryコードの修正

jQuery

1 2<script> 3$(document).ready(function() { 4 // #(ハッシュ)指定されたタブを表示する 5 var hashTabName = document.location.hash; 6 7console.log(hashTabName); 8 9 10 $('.nav-tabs a[href="+hashTabName+"]').tab('show'); 11 12}); 13</script>

の箇所のうち、タブを表示する部分において

jQuery

1 2 $('.nav-tabs a[href="'+hashTabName+'"]').tab('show'); 3

とする(シングルクォートでくくられた中に、#tab4を参照するべきクォーテーションを付した)ことで解決致しました。

投稿2018/03/04 10:11

TakahashiManabu

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問