bootstrap 4和选项卡不起作用

Question

I tried this but I dont understand why it's doesn't work with boostrap 4. The tab appear but it's impossible to see the content.

Thank you

<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>

If you look this it work perfectly : https://codepen.io/jek/pen/BoWNRy My #tab2 and id="tab2" seems correct

I tried also with a direct url like this, but it doesn't work.

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

Answer 1

I'm not 100% sure if this is what you wanted. But to get the test1, test2, test3 as results I think you have to refer the id of tab-content elements in href tags of nav-items

I just tried to modify your code and it looked like this (without 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>

If you want to display a website content inside the nav-tab you may use an iframe

Cheerz