bootstrap选项卡不再切换

时间:2015-10-19 22:20:28

标签: twitter-bootstrap

为什么不切换? 我试图在代码中找到错误,但我找不到任何错误。

<ul id="countrytabs" class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#country1">Descrizione</a>
    </li>
    <li>
        <a data-toggle="tab" href="#country2">Posizione</a>
    </li>
    <li>
        <a data-toggle="tab" href="#country4">Commenti</a>
    </li>
    <li>
        <a data-toggle="tab" href="#country5">Calendar</a>
    </li>

</ul>

<div id="mytabs">
    <div id="country1" class="tab-pane active">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    


    </div>
    <div id="country2" class="tab-pane">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>        

    </div>

    <div id="country4" class="tab-pane">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    

    </div>
    <div id="country5" class="tab-pane">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>    

    </div>
</div>

http://www.bootply.com/pvW865e24k#

1 个答案:

答案 0 :(得分:0)

您必须使用mytabs ID将tab-content类添加到div中。

<div id="mytabs" class="tab-content">