bootstrap tab选项卡

发布时间：2020-12-17 21:22:42 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtml 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/bo

<!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"】，没写这个不会触发点击按钮切换选项卡的事件。

附上效果图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!