选项卡 - 单击选项卡之一后显示的内容（引导程序）

Question

好吧，正如标题所说，我无法在选项卡中显示内容。

我正在做的是从 MySQL 表中获取数据并将其显示在选项卡中（成功获取）。

我面临的问题是页面加载完成后，我必须单击其中一个选项卡才能显示选项卡的所有内容。

这是标签的代码：

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#description" data-toggle="tab">Description</a>
        </li>
        <li>
            <a href="#terms" data-toggle="tab">Terms and Conditions</a>
        </li>
        <li>
            <a href="#returns" data-toggle="tab">Returns and Cancellation</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="description">
            <p class="lead text-justify" style="margin: 10px 5px;">
                <?php echo $descrip; ?>
            </p>
        </div>

        <div class="tab-pane" id="terms">
            <p class="lead text-justify" style="margin: 10px 5px;">
                <?php echo $termsAndCond; ?>
            </p>
        </div>

        <div class="tab-pane" id="returns">
            <p class="lead text-justify" style="margin: 10px 5px;">
                <?php echo $returnsAndCan; ?>
            </p>
        </div>
    </div>
</div>

单击上述代码中的任一选项卡后，就会显示数据。我不知道我在哪里犯了错误。请帮我纠正它。

提前谢谢你。

Answer 1

除了通过设置<li class="active"> 将描述 选项卡设置为活动状态之外，您还必须将描述 选项卡内容设置为活动状态。我想你忘了这样做。

将active 类添加到第一个tab-pane，因此将其从<div class="tab-pane" id="description"> 更改为<div class="tab-pane active" id="description">。

有关 Bootstraps 选项卡组件的更多文档，请参阅 http://getbootstrap.com/javascript/#tabs。