boostrap 4 и tab не работают

Question

boostrap 4 и tab не работают

Я попробовал это, но я не понимаю, почему это не работает с boostrap 4. Вкладка появляется, но невозможно увидеть содержимое.

Спасибо

<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="nav-item">
<?php echo '<a href="' . substr(OSCOM::link( '/suppliers.php', osc_get_all_get_params(), 'AUTO'), strlen($base_url)) . '#tab1" role="tab" data-toggle="tab" class="nav-link active">' . TAB_GENERAL . '</a>'; ?></a>
</li>
<li class="nav-item">
<?php echo '<a href="' . substr(OSCOM::link( 'admin/suppliers.php', osc_get_all_get_params(), 'AUTO'), strlen($base_url)) . '#tab2" role="tab" data-toggle="tab" class="nav-link">' . TAB_SUPPLIERS_NOTE; ?></a>
</li>
<li class="nav-item">
<?php echo '<a href="' . substr(OSCOM::link( 'ClicShoppingAdmin/suppliers.php', osc_get_all_get_params(), 'AUTO'), strlen($base_url)) . '#tab3" role="tab" data-toggle="tab" class="nav-link">' . TAB_VISUEL; ?></a>
</li>
</ul>

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
test1
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
test2
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
test3
</div>
</div>

Если вы посмотрите это, он отлично работает: https://codepen.io/jek/pen/BoWNRy
Мои # tab2 и id = «tab2» кажутся правильными

Я пытался также с прямым URL-адресом, как это, но это не работает.

   <a class="nav-link" href="http://test.com/boutique/admin/suppliers.php#tab2" role="tab" data-toggle="tab"><?php echo TAB_SUPPLIERS_NOTE; ?></a>

0

php tabs twitter-bootstrap-4

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я не уверен на 100%, если это то, что вы хотели. Но чтобы получить результаты test1, test2, test3, я думаю, что вы должны ссылаться на id Вкладка-контент элементы в HREF теги СЧ пункты

Я просто попытался изменить ваш код, и это выглядело так (без php)

<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="nav-item">
<a class="nav-link"  href="#tab1" role="tab" data-toggle="tab" aria-controls="tab1">TAB_GENERAL </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab" aria-controls="tab1">TAB_SUPPLIERS_NOTE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab" aria-controls="tab1">TAB_VISUEL</a>
</li>

<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="tab1">
test1
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
test2
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
test3
</div>

Если вы хотите отобразить содержимое сайта внутри нав-элементный Вы можете использовать iframe

Cheerz

0