リンク末尾のハッシュの値によって開くタブを変える【Bootstrap, jQuery】

<!-- #test1 -->
<div id="test1">
    <ul class="nav nav-tabs">
        <li><a href="#test1-tab1">Tab 1</a></li>
        <li class="active"><a href="#test1-tab2">Tab 2</a></li>
        <li><a href="#test1-tab3">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="test1-tab1">
            <p>Tab1のコンテンツ内容がここに表示されます。</p>
            <img class="img-thumbnail" src="image-10.jpg" />
        </div>
        <div class="tab-pane active" id="test1-tab2">
            <p>Tab2のコンテンツ内容がここに表示されます。</p>
            <img class="img-thumbnail" src="image-11.jpg" />
        </div>
        <div class="tab-pane" id="test1-tab3">
            <p>Tab3のコンテンツ内容がここに表示されます。</p>
            <img class="img-thumbnail" src="image-12.jpg" />
        </div>
    </div>
</div><!--// #test1 -->

このようなタブのhtmlがあるときに、

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

としたら、

Uncaught Error: Syntax error, unrecognized expression:

とエラーが。

jQuery Migrateのバージョンによって、エラーが起きるらしい。

$('a[href^=#]').on( 'click', function() {} );

を、attributeの値を囲んで、

$('a[href^="#"]').on( 'click', function() {} );

ならエラーは起きない。

参考

ハッシュ付きURLリンクでの訪問時にBootstrapの適切なタブを開く＆スクロールする | ENTEREAL/エンタリアル

WP4.5でjQueryがエラー: Syntax error, unrecognized expression | サイトスパイラル(Sitespiral) - 沖縄で ホームページ制作 / WordPressのことなら