记住页面刷新中的“ Tab”位置中的“ Tab”

Question

我有以下问题。 在引导程序中，我具有“选项卡/药丸”菜单：

    <div class="container">
    <div class="row">
        <div class="col-2">
            <div class="nav nav-tabs flex-column nav-pills" id="myTab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
                <a class="nav-link" id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
                <a class="nav-link" id="messages-tab" data-toggle="pill" href="#messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
                <a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
            </div>
        </div>
        <div class="col-10">

            <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
                <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
                <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
            </div>
        </div>
    </div>
</div>

和这样的JS脚本：

<script>
    // Javascript to enable link to tab
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
    }

    // Change hash for page-reload
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        window.location.hash = e.target.hash;
    })
</script>

它工作正常，但是我想要类似标签中的标签。

我有：

但是我要像这样工作：

并且当我在新窗口中打开“个人资料标签2”标签时，该标签不起作用。