bootstraptab选项卡

  • Z时代
  • 2024-01-10
  • 分类：综合

coding

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

附上 效果图：

以上是 bootstraptab选项卡 的全部内容， 来源链接： utcz.com/z/510189.html

回到顶部