引導 - 點擊鏈接後，切換到標籤並移動到錨

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>