Bootstrap:Tab没有正确显示内容

时间:2014-02-02 08:10:50

标签: javascript jquery css twitter-bootstrap

在我的页面中,我使用bootstrap的选项卡,但是当我单击每个选项卡时,选项卡的内容无法正确显示,这是我的代码:

<div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;">
    <ul id="myTab" class="nav nav-tabs nav-justified">
        <li class="active"><a href="#tab-home" data-value="#home" data-toggle="tab">Home</a></li>
        <li><a href="#tab-fav" data-value="#fav" data-toggle="tab">Favoriets</a></li>
        <li><a href="#tab-fr" data-value="#fr" data-toggle="tab">Friends</a></li>
        <li><a href="#tab-ex" data-value="#ex" data-toggle="tab">Experience</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="tab-home">
            HOME
        </div>
        <div class="tab-pane fade active" id="tab-fav">
            My favoriets
        </div>
        <div class="tab-pane fade active" id="tab-fr">
            My Friends
        </div>
        <div class="tab-pane fade active" id="tab-ex">
            My experience
        </div>
    </div>
<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>
</div>

JSFIDDLE

我哪里错了?我该如何解决?

2 个答案:

答案 0 :(得分:2)

您在所有active div上都有tab-pane个班级。除了第一个,将它从所有这些中删除。顺便说一句,在bootstrap 3中,事件不是show,而是shown.bs.tab Bootstrap 3 tabs

我个人使用此代码:Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink,我所做的唯一更改是将on('show'替换为on('shown.bs.tab'

答案 1 :(得分:0)

在JSFiddle上缺少对jQuery库的引用。在Frameworks&amp;下添加jQuery引用后扩展它正在切换标签内容。

在Bootstrap文档中指出引导javascript功能需要jQuery:http://getbootstrap.com/getting-started/#whats-included

此外,您的函数正在使用jQuery表示法。