bootstrap-标签页

时间：2022-03-29 23:26:17
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端视口的设置 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入bootstrap.css -->

    <link rel="stylesheet" href="css/bootstrap.css">

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/bootstrap.js"></script>

    <style>

        #login{

            width:400px;

        }

    </style>

</head>

<body>

<div class="container">

    <ul class="nav nav-tabs">

        <li class="active"><a href="#a" data-toggle="tab">one</a></li>

        <li><a href="#b" data-toggle="tab">two</a></li>

        <li><a href="#c" data-toggle="tab">three</a></li>

    </ul>

    <ul class="tab-content">

        <li id="a" class="tab-pane active">aaa</li>

        <li id="b" class="tab-pane">bbb</li>

        <li id="c" class="tab-pane">ccc</li>

    </ul>

</div>

</body>

<script>

    /*

        标签页

            内容

                — tab-content

                — tab-pane

                — data-toggle="tab"

                — href对应id

                — 淡入淡出方式 fade in active

                — 鼠标移入方式 js 控制 tab("show")

                — 带下拉菜单的切换

     */

</script>

相关文章