BootStrap-CSS样式_插件_选项卡(Tab)插件

最新推荐文章于 2024-01-26 22:01:52 发布

有梦的小草

最新推荐文章于 2024-01-26 22:01:52 发布

阅读量2.3k

点赞数 1

分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_插件 BootStrap选项卡(Tab)插件

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/85650447

版权

BootStrap 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

标签页（Tab）插件

标签页（Tab）在 Bootstrap 导航元素一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以通过以下两种方式启用标签页:

通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。
添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-tabs"> 
   <li><a href="#identifier" data-toggle="tab">Home</a></li> 
... 
</ul>

通过 JavaScript：您可以使用 Javscript 来激活各个标签页，如下所示：

$('#myTab a').click(function (e) { 
  e.preventDefault() 
  $(this).tab('show') 
})

淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面

<div class="tab-content"> 
  <div class="tab-pane fade in active" id="home">...</div> 
  <div class="tab-pane fade" id="NET">...</div> 
  <div class="tab-pane fade" id="ios">...</div> 
  <div class="tab-pane fade" id="java">...</div> 
</div>

代码实例

<!DOCTYPE html>
<html lang="zh-cn">
<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>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container" style="padding-top:50px">
        <div class="col-lg-3">
            <ul class="nav nav-pills nav-stacked">
                <li><button type="button" id="btn01" class="btn btn-info">JS自定义激活home选项卡</button></li>
                <li><button type="button" id="btn02" class="btn btn-success">JS自定义激活.NET选项卡</button></li>
                <li><button type="button" id="btn03" class="btn btn-primary">JS自定义激活ios选项卡</button></li>
                <li><button type="button" id="btn04" class="btn btn-danger">JS自定义激活jmeter选项卡</button></li>
                <li><button type="button" id="btn05" class="btn btn-warning">JS自定义激活ejb选项卡</button></li>
            </ul>
        </div>
        <div class="col-lg-9">
            <p class="active-tab"><strong>激活的标签页</strong>：<span></span>
            </p>
            <p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span>
            </p>
            <hr>
            <ul id="myTab" class="nav nav-pills">
                <li class="active">
                    <a href="#home" data-toggle="tab">W3Cschool Home</a>
                </li>
                <li><a href="#NET" data-toggle="tab">.NET</a>
                </li>
                <li><a href="#ios" data-toggle="tab">iOS</a>
                </li>
                <li class="dropdown">
                    <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java 
                    <b class="caret"></b>
                </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                        <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a>
                        </li>
                        <li><a href="#ejb" tabindex="-1" id="tabejb" data-toggle="tab">ejb</a>
                        </li>
                    </ul>
                </li>
            </ul>
        
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <p>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
                </div>
                <div class="tab-pane fade in active" id="NET">
                    <p>.NET是微软下一代的操作平台，它允许人们在其上构建各种应用方式，使人们尽可能通过简单的方式，多样化地、最大限度地从网站获取信息，解决网站之间的协同工作，并打破计算机、设备、网站、各大机构和工业界间的障碍－－即所谓的“数字孤岛”，从而实现因特网的全部潜能，搭建起第三代互联网平台。</p>
                </div>
                <div class="tab-pane fade" id="ios">
                    <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
                </div>
        
                <div class="tab-pane fade" id="jmeter">
                    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
                </div>
                <div class="tab-pane fade" id="ejb">
                    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            $("#btn01").click(function () {
                // 通过名称选取标签页
                $('#myTab a[href="#home"]').tab('show')
            })
            $("#btn02").click(function () {
                // 通过名称选取标签页
                $('#myTab a[href="#NET"]').tab('show')
            })

            $("#btn03").click(function () {
                // 通过名称选取标签页
                $('#myTab a[href="#ios"]').tab('show')
            })

            $("#btn04").click(function () {
                // 通过名称选取标签页
                $('#myTab a[href="#jmeter"]').tab('show')
            })

            $("#btn05").click(function () {
                // 通过名称选取标签页
                $('#myTab a[href="#ejb"]').tab('show')
            })
            
            $('a[data-toggle="tab"]').on("show.bs.tab",function(e){
                //event.target：定位目标激活的页签
                var activeTab = $(e.target).text();
                //event.relatedTarget：定位目标激活前一个的页签
                var preTab = $(e.relatedTarget).text();
                $(".active-tab span").html(activeTab);
                $(".previous-tab span").html(preTab);
            })
        })
    </script>
</body>
</html>

显示效果：

有梦的小草

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-CSS样式_插件_选项卡(Tab)插件

标签页（Tab）插件标签页（Tab）在 Bootstrap 导航元素一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版...
复制链接

扫一扫