yinshiro yinshiro - 5 months ago 22
jQuery Question

Bootstrap - after clicking link, switch to tab and move to anchor

What i'm trying to achieve: After clicking on a link (inside a tab), switch to another tab and move to a specific part of the page (like a anchor).

What i got working is switching to the tab after clicking on the link, but it won't scroll down to the anchor point.

Help is really appreciated!

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

The other tab that is holding the anchor tag, remove class "fade" and add class "active" to it like this.

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