bootstrap3導航選項卡不切換選項卡

Question

這是當前正在使用的代碼。

我希望它能夠切換選項卡，但事實並非如此。 我曾嘗試取消活動課程，但仍然無法正常工作。

我遵循了一個教程來做到這一點，不需要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>

Answer 1

您缺少所有JavaScript。

<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