web-dev-qa-db-ja.com

URLリンクに基づいてBootstrap tabをアクティブにする

bootstrapタブがあり、URLリンクのベースでタブをアクティブにしたい。

例えば：

xyz.xxx/index#tab2ページの読み込み時にtab2 activeにする必要があります。

これが私のコードです

<div class="tab-wrap">
  <div class="parrent pull-left">
    <ul class="nav nav-tabs nav-stacked">
      <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01">Tab 1</a></li>
      <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">Tab 2</a></li>
      <li class=""><a href="#tab3" data-toggle="tab" class="analistic-03">Tab 3</a></li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane active in" id="tab1">
      <p> hello 1</p>
    </div>

    <div class="tab-pane" id="tab2">
      <p> hello 2</p>
    </div>

    <div class="tab-pane" id="tab3">
      <p>Hello 3</p>
    </div>
  </div> <!--/.tab-content-->
</div><!--/.tab-wrap-->

デフォルトではtab1をアクティブにするため、私の場合、URLリンクに基づいて2番目のタブをデフォルトでアクティブにする可能性があります。

URLに＃tab2を配置すると、ページの読み込み時にデフォルトでtab2がアクティブになるはずです。

jquerytwitter-bootstraptabs
9
Q-bart

このようなjqueryを使用してそれを実現できます。例： "www.myurl.com/page#tab1";

var url = window.location.href;

URLリンクからアクティブにするタブを取得します。

 var activeTab = url.substring(url.indexOf("#") + 1);

古いアクティブなタブクラスを削除

 $(".tab-pane").removeClass("active in");

アクティブなクラスを新しいタブに追加

$("#" + activeTab).addClass("active in");

または、activeTabを取得した後、直接タブを開きます。

$('a[href="#'+ activeTab +'"]').tab('show')
19
Anil Panwar

次のコードを使用できます。

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav.nav-pills a[href="' + hash + '"]').tab('show'); 
  $('ul.nav.nav-pills a').click(function (e) {
     $(this).tab('show');
     var scrollmem = $('body').scrollTop();
     window.location.hash = this.hash;
  });
});
3
Patel Disha

JSをどのように設定したかに応じて、これを実行できるはずです。

www.myurl.com/page#tab1

www.myurl.com/page#tab2

www.myurl.com/page#tab3

どこ #tab1、#tab2および#tab3はタブのidと等しい

編集

ここを参照してください： Twitter Bootstrap-タブ-URLは変更されません

1
lukehillonline

<ul class="nav nav-tabs nav-stacked" id="myTab">にIDを追加してから、次のJavaScriptコードを使用できます。

$(document).ready(() => {
  let url = location.href.replace(/\/$/, "");

  if (location.hash) {
    const hash = url.split("#");
    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
    url = location.href.replace(/\/#/, "#");
    history.replaceState(null, null, url);
    setTimeout(() => {
      $(window).scrollTop(0);
    }, 400);
  } 

  $('a[data-toggle="tab"]').on("click", function() {
    let newUrl;
    const hash = $(this).attr("href");
    if(hash == "#home") {
      newUrl = url.split("#")[0];
    } else {`enter code here`
      newUrl = url.split("#")[0] + hash;
    }
    newUrl += "/";
    history.replaceState(null, null, newUrl);
  });
});

詳細については このリンクをたどる 。

1
Tim Kariuki

URLに基​​づいてそれをトリガーしたい場合は、次のようにすることもできます

$(function(){
   var hash = window.location.hash;
   if(hash != ''){
      $("a[href='"+url+"']").click();
   }
})
0
Swapnil Ghone