ブートストラップ - リンクをクリックした後、タブに切り替えてアンカーに移動

Question

私が達成しようとしていること：リンク（タブ内）をクリックした後、別のタブに切り替えてページの特定の部分アンカー）。

私はリンクをクリックした後にタブに切り替えることができましたが、アンカーポイントまでスクロールしません。

本当にありがとうございます！

コード：

<div class="tab-content"> 
    <div class="tab-pane active in" id="A"> 
     <a data-tab-destination="tab-B" href="#bag-in-box">Bag-in-Box</a> 
    </div> 

    <div class="tab-pane fade" id="B"> 
     ... 
     <div id="bag-in-box"> <!-- This is where it needs to scroll to --> 
      <p>Bag-in-Box</p> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $("a[data-tab-destination]").on('click', function(e) { 
      e.preventDefault(); 
      // Works 
      var tab = $(this).attr('data-tab-destination'); 
      $("#" + tab).click(); 

      // Doesn't work 
      var hashtag = $(this.hash); 
      var target = hashtag.length ? hashtag : $('[name=' + this.hash.slice(1) + ']'); 

      if (target.length) { 
       $('html, body').animate({scrollTop: target.offset().top}, 1000); 
       return false; 
      } 
     }); 
    }); 
</script> 

Answer 1

アンカータグを保持している他のタブ、クラス「フェード」を削除して、このようにそれを「アクティブ」クラスを追加します。

<script type="text/javascript"> 
    $(function() { 
     $("a[data-tab-destination]").on('click', function(e) { 
      e.preventDefault(); 
      // Works 
      var tab = $(this).attr('data-tab-destination'); 

      $("#" + tab).click(); 

      // Doesn't work 
      var hashtag = $(this.hash); 

      var target = hashtag.length ? hashtag : $('[name=' + this.hash.slice(1) + ']'); 

      if (target.length) { 
       $("#B").removeClass("fade").addClass("active"); 
       $('html, body').animate({scrollTop: target.offset().top}, 1000); 
       return false; 
      } 
     }); 
    }); 
</script>