繁体   English   中英

引导程序-单击链接后,切换至标签页并移至锚点

[英]Bootstrap - after clicking link, switch to tab and move to 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>

另一个带有锚标记的选项卡,删除类“ 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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM