Создание мастера начальной загрузки с вкладками, но кнопки работают только один раз

Question

Я хочу иметь возможность перемещаться между вкладками.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="tab-content">
        <div id="divOne" class="tab-pane fade in active show">
            Div One Content
            <a class="nav-link" data-toggle="tab" href="#divTwo">Next</a>
        </div>

        <div id="divTwo" class="tab-pane fade">
            Div Two Content
            <a class="nav-link" data-toggle="tab" href="#divOne">Previous</a>
        </div>

    </div>

Когда страница загружается, вы нажимаете первую ссылку «Далее», и она скрывает divOne и показывает divTwo.Когда вы нажимаете Предыдущий, он скрывает divTwo и показывает divOne.

Однако после этого, нажимая кнопку Далее, снова ничего не происходит.

Я не уверен, испортила ли моя разметка или я должен использовать какой-то jquery для следующего /предыдущий.

Answer 1

Вы также можете сделать это

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="tab-content">
    <div id="divOne1" class="tab-pane fade show active">1st</div>
    <div id="divTwo1" class="tab-pane fade">2nd</div>
</div>
<nav>
    <div class="nav" id="navClassID">
        <a class="nav-link active" data-toggle="tab" href="#divOne1">Home</a>
        <a class="nav-link" data-toggle="tab" href="#divTwo1">Profile</a>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>