Bootstrap标签页面(tab)

最新推荐文章于 2025-10-13 10:24:54 发布

原创最新推荐文章于 2025-10-13 10:24:54 发布 · 692 阅读

1 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍如何利用HTML、CSS及Bootstrap框架创建一个带有多个标签页的Tab切换效果。通过引入jQuery和Bootstrap的JS文件，结合HTML结构和CSS样式，实现了Tab切换功能，使页面更加动态和交互友好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="../../libs/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../libs/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div>
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#home" data-toggle="tab">Home</a>
            </li>
            <li>
                <a href="#home1" data-toggle="tab">Home1</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane in active" id="home">
                <div>
                    //code
                </div>
            </div>
            <div class="tab-pane" id="home1">
                <div>
                    //code11
                </div>

            </div>
        </div>

    </div>

</body>
</html>