<!-- #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/エンタリアル