bootstrap tab选项卡

2021-02-20 13:26发布

站内文章 / 前沿技术
519 0 0 
<!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"】，没写这个不会触发点击按钮切换选项卡的事件。

附上 效果图：

 

标签：
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~