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

Question

Я пытаюсь реализовать две основные вкладки и панели. На панели не отображается содержимое (Страница 1) при загрузке страницы. Тем не менее, нажатие на другую вкладку прекрасно работает с нужным содержимым (Страница 2), а затем возврат к первой вкладке работает нормально (Страница 1).

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane">
        Page 1
    </div>
    <div id="panel2" class="tab-pane">
        Page 2
    </div>
</div>

Что-то мне не хватает?

Answer 1

Я думаю, нам нужно больше деталей, потому что ваш код работает нормально

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane show active">
       This is the content of page1............................
    </div>
    <div id="panel2" class="tab-pane">
       This is the content of page2............................
    </div>
</div>

Answer 2

У вас нет активного класса для панели содержимого. Для отображения содержимого panel1 по умолчанию необходимо следующее:

<div id="panel1" class="tab-pane show active">...