bootstrap tab选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人中心2</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#menu1" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#menu2" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#menu3" data-toggle="tab">Messages</a></li>
        </ul>
        <div class="tab-content">
            <div id="menu1" class="container tab-pane active">
                11
            </div>
            <div id="menu2" class="container tab-pane ">
                22
            </div>
            <div id="menu3" class="container tab-pane fade">
                33
            </div>
        </div>
    </body>
</html>

注意：不要忘记写【data-toggle="tab"】，没写这个不会触发点击按钮切换选项卡的事件。

附上效果图：

来源：oschina

链接：https://my.oschina.net/u/4332949/blog/3449581

标签

javascript

Bootstrap

jquery

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!