###前提・実現したいこと
JS初心者です。Rails 5.0.6 と Bootstrap3を用いて、タブを作っています。やりたいことは、他のページのリンクからタブのあるページに飛んだときに、デフォルトで開くタブを指定したいということです。通常はclass="active"を指定しているタブをデフォルトで開きますが、リンクのパスの末尾に#タブ名を追加することで、そのリンクだけ、デフォルトでそのタブ名のタブを開いてもらいたいのです。
例えば以下のソースコードでは、デフォルトでtab1が表示されますが、パスの末尾に#tab2があれば始めからtab2の内容を表示するというようにしたいのです。
https://entereal.co.jp/blog/view/487848
を参考にしましたが、エラーが起こります。
###該当のソースコード
html
1<div role="tabpanel"> 2 <ul class="nav nav-tabs" role="tablist"> 3 <li role="presentation" class="active"> 4 <a class="mypage_tab" href="#tab1" data-toggle="tab" role="tab" aria-controls="tab1">Tab 1</a> 5 </li> 6 <li role="presentation"> 7 <a class="mypage_tab" href="#tab2" data-toggle="tab" role="tab" aria-controls="tab2">Tab 2</a> 8 </li> 9 </ul> 10 11 <div id="tabContent1" class="tab-content"> 12 <div role="tabpanel" class="tab-pane fade in active" id="tab1">Content1</div> 13 <div role="tabpanel" class="tab-pane fade" id="tab2">Content 2</div> 14 </div> 15</div>
js
1$(document).ready(function() { 2// #(ハッシュ)指定されたタブを表示する 3 4 var hashTabName = document.location.hash; 5 if (hashTabName) { 6 $('.nav-tabs a[href=' + hashTabName + ']').tab('show'); 7 } 8});
###発生している問題・エラーメッセージ
以上のソースコードでURLの末尾に#tab2を付けても、Chromeのコンソールで
Uncaught TypeError: $(...).tab is not a function
と表示され、選ばれたタブはtab1のままです。
bootstrap.jsを読み込んでいるはずなのに、こうなります。
###試したこと
jsにconsole.log(hashTabName)とすると、コンソールに#tab2と表示されるので、パスからの
ハッシュ値は取得できています。.tabを関数として認識していないのでしょうか?ご教授願います。。。。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/06 16:58
2017/12/07 01:26
2017/12/09 06:31
2017/12/09 07:05