bootstrap 4和选项卡不起作用

Question

我试过这个，但我不明白为什么它不适用于bootstrap 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”似乎是正确的

我也试过像这样的直接网址，但它不起作用。

   <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

如果这是你想要的，我不是100％肯定。但是为了得到test1，test2，test3作为结果我认为你必须在nav-items的href标签中引用tab-content元素的id

我只是试图修改你的代码，它看起来像这样（没有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