Bootstrapのタブにおいて、デフォルトで表示するタブを、リンクのパスから指定したい

###前提・実現したいこと
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件

ベストアンサー

こちらのブラウザはwindows chromeですが、開発ツールのコンソールにはエラーは表示されませんでした。
どうも$('.nav-tabs a[href=' + hashTabName + ']')が取得できず、そこでjsがストップ？しているようです。
一見問題ないように思えますが、何か悪影響しているか、セレクタの指定が間違っているのでしょう。

aタグにidを付けてそれをセレクタとして指定したところ、動作自体はするようになりました。
でもアウトラインが表示されてしまうのでスタイルシートで消してます。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>test</title>
6<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
7<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
8<style>
9  a.mypage_tab:focus {
10    outline: none;
11  }
12</style>
13</head>
14<body>
15<div role="tabpanel">
16  <ul class="nav nav-tabs" role="tablist">
17    <li role="presentation" class="active">
18      <a class="mypage_tab" href="#tab1" data-toggle="tab" role="tab" aria-controls="tab1" id="navtab1">Tab 1</a>
19    </li>
20    <li role="presentation">
21      <a class="mypage_tab" href="#tab2" data-toggle="tab" role="tab" aria-controls="tab2" id="navtab2">Tab 2</a>
22    </li>
23  </ul>
24
25  <div id="tabContent1" class="tab-content">
26    <div role="tabpanel" class="tab-pane fade in active" id="tab1">Content1</div>
27    <div role="tabpanel" class="tab-pane fade" id="tab2">Content 2</div>
28  </div>
29</div>
30
31<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
32<script type="text/javascript">
33$(document).ready(function() {
34  var hashTabName = document.location.hash;
35  if (hashTabName) {
36    $(hashTabName).tab('show');
37  }
38});
39</script>
40</body>
41</html>

投稿2017/12/06 15:58

ooeok

総合スコア469

kazutan

2017/12/06 16:58

ご提示のhtmlファイルをそのままChromeで開くと、問題なく動きました。しかし、このコードのbodyタグ内をRailsのビューファイルに組み込んで同じように開くと、Uncaught TypeError: $(...).tab is not a functionとなってしまいます。jqueryやbootstrapのjsファイルが読み込めていないためtabメソッドが使用できないのかと思いましたが、そもそもbootstrap.jsが読み込めていなければタブは動かないはずですよね。。。application.jsには//= require jqueryと//= require bootstrapを書いています。

ooeok

2017/12/07 01:26

rails固有の問題ではないと思います。たぶんjqueryかbootstrapのバージョンではないかと。

kazutan

2017/12/09 06:31

解決いたしました！他のJSファイルでもUncaught TypeErrorが出ていたのですが、どうやらjqueryの読み込みがうまくできいなかったようです。 https://qiita.com/keiy121/items/d1880ff2d0de444458c7 を参考にするとうまく動きました！ありがとうございました＾＾

ooeok

2017/12/09 07:05

rails5でturbolinksの問題は解決したと思っていましたが、まだ問題出てるのか。とはいえ、こちらの環境(centos6.9+apache2.4)ではまったく問題なく使えてます。環境が影響しているのかもしれませんね。

行動規範の内容に同意します