bootstrap3 nav-tabs不切换标签

时间:2021-11-20 12:40:00

This is currently the code I'm working with.

这是我正在使用的代码。

I want it to be able to switch tabs however it does not. I've tried taking off the active class however it still doesn't work.

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

I followed a tutorial to do it this way which didn't require JavaScript.

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

Can anyone help me find out why it is not working?

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

<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 个解决方案

#1


0  

You are missing all javascripts.

你缺少所有的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>

Refer to this : https://codepen.io/jrcanicula/pen/vmojRG

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

#1


0  

You are missing all javascripts.

你缺少所有的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>

Refer to this : https://codepen.io/jrcanicula/pen/vmojRG

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