jQuery Не отображается содержимое Bootstrap 4 панелей с вкладками после замены содержимого Div, содержащего их

Question

Я использую следующие jQuery, чтобы нацелить серию div, чтобы показать первый, а затем показать и скрыть серию из шести других при нажатии ряда ссылок. Каждый div также имеет Bootstrap 4 панелей с вкладками. Проблема в том, что содержимое панели вкладок bootstrap 4 вкладок скрыто при загрузке каждого элемента div. У меня есть шесть div (страниц), чтобы показать все с вкладками (шесть комплектов).

Как мне обойти это? Я подозреваю, что $ content.not ($ target) скрывает все, что не является целевым содержимым, как виновника, но я не знаю, как сохранить состояние на каждой странице и не скрывать содержимое вкладки навигации.

jQuery

$(document).ready(function(){    
    var $contents = $('.page-content');
    $contents.slice(1).hide();
    $('.page').click(function() {
        var $target = $('#' + this.id + 'show').show();
        $contents.not($target).hide();
    });
});

HTML (упрощенно):

<a id="page1" class="page active"><span> div 1</span></a><br>
<a id="page2" class="page">div 2</a><br>
<a id="page3" class="page">div 3</a><br>
<a id="page4" class="page">div 4</a><br>
<a id="page5" class="page">div 5</a><br>
<a id="page6" class="tab">3</a><br><br>


<div id="pages">
    <div id="page1show" class="container page-content" data-page="page1show">
    <p> First tabs </p>
        <ul class="nav nav-tabs ">
            <li class="nav-item">
                <a data-target="#as" class="nav-link" data-toggle="tab">First link one</a>
            </li>
            <li class="nav-item">
                <a data-target="#in" class="nav-link" data-toggle="tab">First link two</a>
            </li>
            <li class="nav-item">
                <a data-target="#ply" class="nav-link" data-toggle="tab">First link three</a>
            </li>
        </ul>
        <div class="tab-content mt-3">
            <div class="tab-pane fade show active" id="as">
                <p>First link one</p>
            </div>
            <div class="tab-pane fade" id="in">
                <p>First link two</p>
            </div>
            <div class="tab-pane fade" id="ply">
                <p>First link three content</p>
            </div>
        </div>

    </div>

    <div id="page2show" class="container page-content" data-page="page2show">
        <p> Second tabs </p>
        <ul class="nav nav-tabs ">
            <li class="nav-item">
                <a data-target="#as" class="nav-link" data-toggle="tab">Second 1 link</a>
            </li>
            <li class="nav-item">
                <a data-target="#in" class="nav-link" data-toggle="tab">Second 2 link</a>
            </li>
            <li class="nav-item">
                <a data-target="#ply" class="nav-link" data-toggle="tab">second 3 link</a>
            </li>
        </ul>
        <div class="tab-content mt-3">
            <div class="tab-pane fade show active" id="as">
                <p>Content</p>
            </div>
            <div class="tab-pane fade" id="in">
                <p>content</p>
            </div>
            <div class="tab-pane fade" id="ply">
                <p>content</p>
            </div>
        </div>

    </div>
</div>