1. ホーム
  2. jquery

[解決済み] Twitter Bootstrap - タブ - URLが変更されない

2022-10-07 18:17:55

質問

Twitter Bootstrapのquot;tabs"を使用しています。

私は以下のコードを持っています。

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

タブは正常に動作しますが、URL内に#add, #edit, #deleteが追加されません。

を削除すると data-toggle を削除すると、URLは変更されますが、タブは機能しません。

何か解決策があれば教えてください。

どのように解決するのですか?

このコードを試してみてください。これは、URLへのタブのhrefを追加し、ページロード時にハッシュに基づいてタブを開きます。

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});