Question

我尝试了这个，但我不明白为什么它不能使用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 =＆＃34; tab2＆＃34;似乎是正确的

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

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

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

boostrap 4和tab确实不起作用

1 个答案: