Bootstrap вкладки не меняются - PullRequest
Новая
       34

Bootstrap вкладки не меняются

0 голосов
/ 28 апреля 2020

У меня есть следующий код: 

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#tab-test-01" role="tab">Test 01</a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#tab-test-02" role="tab">Test 02</a>
    </li>
</ul>


<div class="tab-content" id="myTabContent">

    <div class="tab-pane fade show active" id="tab-test-01" role="tabpanel">
        <h1>Test 01</h1>
    </div>

    <div class="tab-pane fade" id="tab-test-02" role="tabpanel">
        <h1>Test 02</h1>
    </div>

</div>

Но обнаружим, что ссылка «Тест 01» постоянно активна, даже когда я нажимаю «Тест 02»

1 Ответ

1 голос
/ 28 апреля 2020

вы за go ставите data-toggle="tab"

См. Фрагмент фыр. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab-test-01">Test 01</a>
    </li>

    <li class="nav-item">
        <a class="nav-link"  data-toggle="tab" href="#tab-test-02">Test 02</a>
    </li>
</ul>


<div class="tab-content" id="myTabContent">

    <div class="tab-pane fade show active" id="tab-test-01">
        <h1>Test 01</h1>
    </div>

    <div class="tab-pane fade" id="tab-test-02">
        <h1>Test 02</h1>
    </div>

</div>
...