Bootstrap - 单击链接后，切换到选项卡并移动到锚点

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

另一个持有锚标签的标签，删除类“fade”并像这样添加类“active”。

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