bootstrap3 nav-tabs不切换标签

时间:2015-06-04 17:48:32

标签: html css twitter-bootstrap-3

这是我正在使用的代码。

我希望它能够切换标签,但事实并非如此。我尝试脱掉活跃的课程,但它仍然无效。

我按照教程这样做,不需要JavaScript。

任何人都可以帮我找出它无法正常工作的原因吗?

<div class="nav">
<ul class="nav nav-tabs">
 <li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
 <li><a data-toggle="tab" href="#Tournaments">Tournaments</a></li>
 <li><a data-toggle="tab" href="#About">About</a></li>
 <li><a data-toggle="tab" href="#Contact">Contact</a></li>
</ul>
</div>

<div class="tab-content">
<div id="Home" class="tab-pane fade">
<h3> example </h3>
</div>

    <div id="Tournaments" class="tab-pane fade">
    <h3>create images to show for new pages</h3>
    </div>

        <div id="About" class="tab-pane fade">
        <h3>6214</h3>
        </div>

            <div id="Contact" class="tab-pane fade"> 
            <h3>exds</h3>   
            </div>      

</div>

1 个答案:

答案 0 :(得分:0)

你缺少所有的javascripts。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

请参阅:https://codepen.io/jrcanicula/pen/vmojRG