Bootstrap - nach dem Klicken auf Link, wechseln Sie zum Tab und bewegen Sie zum Anker

Question

Was ich versuche zu erreichen: Nach dem Klicken auf einen Link (innerhalb eines Tabs), wechseln Sie zu einem anderen Tab und bewegen Sie sich zu einem bestimmten Teil der Seite (wie ein Anker).

Was ich funktionierte, ist nach dem Klicken auf den Link auf die Registerkarte wechseln, aber es wird nicht bis zum Ankerpunkt scrollen.

Hilfe wird wirklich geschätzt!

Code:

<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

Die anderen Registerkarte, die den Anker-Tag halten, entfernen Klasse „fade“ und fügt Klasse „aktiv“, um es so.

<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>