Twitter Bootstrap选项卡未激活[关闭]答案

【问题标题】：Twitter Bootstrap Tabs not activating [closed]Twitter Bootstrap选项卡未激活[关闭]
【发布时间】：2017-08-23 19:36:57
【问题描述】：

Twitter Bootstrap 菜单上的活动选项卡正在显示，但没有显示任何其他选项卡。类似问题的解决方案（参见here）是data-toggle="tab"，但这对我不起作用。

这是标签的代码sn-p：

<div class="container">
    <div id="content">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#skills" data-toggle="tab">Skills</a></li>
            <li><a href="#interests" data-toggle="tab">Interests</a></li>
            <li><a href="#languages" data-toggle="tab">Languages</a></li>
        </ul>
        <div id="my-tab-content" class="tab-content">
            <div class="tab-pane active" id="skills">
                <ul class="checkbox-grid">
                    <li><label><input type="checkbox" name="checkbox" id="Business Development box" value= "Business Development" onclick="boxclick(this,'skills','Business Development')" /> Business Development </label></li>
                    <li><label><input type="checkbox" name="checkbox" id="Capacity Building box" onclick="boxclick(this,'skills','Capacity Building')" />  Capacity Building </label></li> 
                </ul>
            </div>
            <div class="tab-pane" id="interests">
                <ul class="checkbox-grid">
                    <li><label><input  name="checkbox" id="Art/Architecture/Music box" onclick="boxclick(this,'interests','Training Development')"/> Art/Architecture/Music</label></li>
                    <li><label><input  name="checkbox" id="Child Rights box" onclick="boxclick(this,'interests','Training Development')"/> Child Rights</label></li>

                </ul>
            </div>
            <div class="tab-pane" id="languages">
                <h1>Languages</h1>
                <p>languages languages languages</p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

你没有添加引导 js :)

【讨论】：

不是这样——我已将它添加到我当前的站点，但它仍然无法正常工作。此处也提供了此答案：*.com/questions/9630595/…，结果证明无法解决问题
你的 bootstrap-tab.js 是错误的...里面是 html 代码而不是 js 代码。

【解决方案2】：

您必须包含 bootstrap.js 文件才能使其工作。

【讨论】：

【解决方案3】：

您已包含bootstrap-tab.js，但未包含可能需要的其他文件。请打开 FireBug，重新加载您的页面，您将在控制台中看到错误“选项卡不是函数”，这意味着引导代码未正确初始化。

【讨论】：