bootstrap tab选项卡

最新推荐文章于 2023-03-11 09:28:02 发布

weixin_30672295

最新推荐文章于 2023-03-11 09:28:02 发布

阅读量479

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/codeDevotee/p/11251357.html

版权

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

附上效果图：

转载于:https://www.cnblogs.com/codeDevotee/p/11251357.html

weixin_30672295

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap tab选项卡

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>个人中心2</title> <link rel="stylesheet" type="text/css" href="cs...
复制链接

扫一扫