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

Question

我想要实现的目标是:单击一个链接(在选项卡内)后，切换到另一个选项卡并移动到页面的特定部分(如 anchor )。

我的工作是在单击链接后切换到选项卡，但它不会向下滚动到 anchor 。

非常感谢您的帮助!

代码:

<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

另一个包含 anchor 标记的选项卡，删除类“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>