bootstrap-tab

功能：点击时切换相应的内容或图片

插件：tab.js

要点：tab标签用在导航条上，以data-toggle作被点击者， 以tab-content作内容显示

复制代码
<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" media="screen" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1 class="text-center">Hello World</h1>
        
        <!-- 直接使用bs3-tabs命令即可实现 -->
            <div role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a>
                    </li>
                    <li role="presentation">
                        <a href="#tab" aria-controls="tab" role="tab" data-toggle="tab">tab</a>
                    </li>
                </ul>
            
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home"><p>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                    </p></div>
                    <div role="tabpanel" class="tab-pane" id="tab"><p>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                    </p></div>
                </div>
            </div>
        
     

        <script src="../extlib/jquery-1.11.1.min.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
        <!-- Local bootstrap CSS & JS -->
        <script src="../bootstrap-3.3.5-dist/js/collapse.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/scrollspy.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/transition.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/dropdown.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/alert.js"></script>

    </body>
</html>
复制代码

 

posted @   cogitoergosum  阅读(365)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手