javascript - Twitter Bootstrap 选项卡未激活

标签 javascript jquery twitter-bootstrap

Twitter Bootstrap 菜单上的事件选项卡已显示,但未显示任何其他选项卡。类似问题的解决方案(参见 here )是 data-toggle="tab"但这对我不起作用。

这是该选项卡的代码片段:

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

最佳答案

您没有添加 bootstrap js :)

关于javascript - Twitter Bootstrap 选项卡未激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17706371/

相关文章:

javascript - "Easing-out"使用 jQuery 单击另一个 div 时出现无限 CSS 旋转动画

javascript - 是否可以在两个单独的页面上运行两个内容脚本?

jquery toggle breaks float in ie

javascript - 用线条分割网页

javascript - 将链接文本包裹在按钮内,使其占按钮宽度的 100% 以下

javascript - IE11/Windows 10 => 对象不支持属性或方法 'includes'

javascript - ExtJS 和/或 DHTML 中的事件的 "related target"是什么?

javascript - 如何获得相对容器内的鼠标点击(触摸)位置

javascript - 滚动到页面的那一部分后如何加载图像?

html - Rails 中的 Bootstrap 旋转木马