一起来了解下Bootstrap中的tab选项卡

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

一起来了解下Bootstrap中的tab选项卡

本篇文章带大家一起了解下Bootstrap中的tab选项卡。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

选项卡Tabs是Web中一种非常常用的功能。用户点击对菜单项,能切换出对应的内容。本文将详细介绍Bootstrap选项卡【相关推荐:《bootstrap教程》】

基本用法

  Bootstrap框架中的选项卡主要有两部分内容组成:

  1、选项卡菜单组件,对应的是 Bootstrap的 nav-tabs

  2、可以切换的选项卡面板组件,在 Bootstrap 中通常 tab-pane 来表示

  在Bootstrap框架中选项卡nav-tabs已带有样式,而对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的

.tab-content > .tab-pane {    display: none;}.tab-content > .active {    display: block;}
登录后复制

  选项卡定义data属性来触发切换效果。当然前提要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求:

  1、选项卡导航链接中要设置 data-toggle="tab"

  2、并且设置 data-target="对应内容面板的选择符(一般是ID)";如果是链接的话,还可以通过 href="对应内容面板的选择符(一般是ID)",主要作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

  3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配

<!-- 选项卡菜单--><ul id="myTab" class="nav nav-tabs" role="tablist">    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane active" id="bulletin">公告内容面板</div>    <div class="tab-pane " id="rule">规则内容面板</div>    <div class="tab-pane " id="forum">论坛内容面板</div>    <div class="tab-pane " id="security">安全内容面板</div>    <div class="tab-pane " id="welfare">公益内容面板</div></div>
登录后复制

【渐入效果】

  为了让面板的隐藏与显示在切换的过程效果更流畅,可以在面板中添加类名 fade,让其产生渐入的效果。

  在添加 fade 样式时,最初的默认显示的内容面板一定要加上 in 类名,不然用户无法看到其内容

<!-- 选项卡菜单--><ul id="myTab" class="nav nav-tabs" role="tablist">    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>    <div class="tab-pane fade" id="rule">规则内容面板</div>    <div class="tab-pane fade" id="forum">论坛内容面板</div>    <div class="tab-pane fade" id="security">安全内容面板</div>    <div class="tab-pane fade" id="welfare">公益内容面板</div></div>
登录后复制

【胶囊式选项卡】

  在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外,还可以让胶囊式 nav-pills 导航也具有选项卡的功能。只需要将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle="tab"换成data-toggle="pill"

<!-- 选项卡菜单--><ul id="myTab" class="nav nav-pills" role="tablist">    <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>    <li><a href="#rule" role="tab" data-toggle="pill">规则</a></li>    <li><a href="#forum" role="tab" data-toggle="pill">论坛</a></li>    <li><a href="#security" role="tab" data-toggle="pill">安全</a></li>    <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>    <div class="tab-pane fade" id="rule">规则内容面板</div>    <div class="tab-pane fade" id="forum">论坛内容面板</div>    <div class="tab-pane fade" id="security">安全内容面板</div>    <div class="tab-pane fade" id="welfare">公益内容面板</div></div>
登录后复制

JS触发

  除了在HTML设置 data-toggle 来触发选项卡之外,还可以通过JavaScript直接调用。

  在每个链接的单击事件中调用tab("show")方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性,然后通过下面的脚本来调用

$(function(){    $("#myTab a").click(function(e){        e.preventDefault();        $(this).tab("show");    });})
登录后复制
<!-- 选项卡菜单--><ul id="myTab" class="nav nav-pills" role="tablist">    <li class="active"><a href="#bulletin" role="tab">公告</a></li>    <li><a href="#rule" role="tab" >规则</a></li>    <li><a href="#forum" role="tab" >论坛</a></li>    <li><a href="#security" role="tab" >安全</a></li>    <li><a href="#welfare" role="tab" >公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>    <div class="tab-pane fade" id="rule">规则内容面板</div>    <div class="tab-pane fade" id="forum">论坛内容面板</div>    <div class="tab-pane fade" id="security">安全内容面板</div>    <div class="tab-pane fade" id="welfare">公益内容面板</div></div><script>$(function(){    $("#myTab a").click(function(e){        e.preventDefault();        $(this).tab("show");    });})</script>
登录后复制

【事件订阅】

show.bs.tab        show方法调用之后立即触发该事件shown.bs.tab      此事件在tab已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发hide.bs.tab        hide方法调用之后立即触发该事件。hidden.bs.tab     此事件在tab被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
登录后复制
<!-- 选项卡菜单--><ul id="myTab" class="nav nav-pills" role="tablist">    <li class="active"><a href="#bulletin" role="tab">公告</a></li>    <li><a href="#rule" role="tab" >规则</a></li>    <li><a href="#forum" role="tab" >论坛</a></li>    <li><a href="#security" role="tab" >安全</a></li>    <li><a href="#welfare" role="tab" >公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>    <div class="tab-pane fade" id="rule">规则内容面板</div>    <div class="tab-pane fade" id="forum">论坛内容面板</div>    <div class="tab-pane fade" id="security">安全内容面板</div>    <div class="tab-pane fade" id="welfare">公益内容面板</div></div><script>$(function(){    $("#myTab a").click(function(e){        e.preventDefault();        $(this).tab("show");    });    $("#myTab").on("show.bs.tab",function(e){         $(e.target).css('outline','1px solid black');        }).on("hide.bs.tab",function(e){        $(e.target).css('outline','none');      })})</script>
登录后复制

JS源码

【1】IIFE

  使用立即调用函数,防止插件内代码外泄,从而形成一个闭环,并且只能从jQuery的fn里进行扩展

+function ($) {    //使用es5严格模式    'use strict';    //}(window.jQuery);
登录后复制

【2】初始设置

var Tab = function (element) {    //指定当前元素    this.element = $(element)  }  //版本号为3.3.7  Tab.VERSION = '3.3.7'  //动画时间为150ms  Tab.TRANSITION_DURATION = 150
登录后复制

【3】插件核心代码

<!-- 选项卡菜单--><ul id="myTab" class="nav nav-tabs" role="tablist">    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane active" id="bulletin">公告内容面板</div>    <div class="tab-pane " id="rule">规则内容面板</div>    <div class="tab-pane " id="forum">论坛内容面板</div>    <div class="tab-pane " id="security">安全内容面板</div>    <div class="tab-pane " id="welfare">公益内容面板</div></div>0
登录后复制

【4】jQuery插件定义

<!-- 选项卡菜单--><ul id="myTab" class="nav nav-tabs" role="tablist">    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane active" id="bulletin">公告内容面板</div>    <div class="tab-pane " id="rule">规则内容面板</div>    <div class="tab-pane " id="forum">论坛内容面板</div>    <div class="tab-pane " id="security">安全内容面板</div>    <div class="tab-pane " id="welfare">公益内容面板</div></div>1
登录后复制

【5】防冲突处理

<!-- 选项卡菜单--><ul id="myTab" class="nav nav-tabs" role="tablist">    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane active" id="bulletin">公告内容面板</div>    <div class="tab-pane " id="rule">规则内容面板</div>    <div class="tab-pane " id="forum">论坛内容面板</div>    <div class="tab-pane " id="security">安全内容面板</div>    <div class="tab-pane " id="welfare">公益内容面板</div></div>2
登录后复制

【6】绑定触发事件

<!-- 选项卡菜单--><ul id="myTab" class="nav nav-tabs" role="tablist">    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">    <div class="tab-pane active" id="bulletin">公告内容面板</div>    <div class="tab-pane " id="rule">规则内容面板</div>    <div class="tab-pane " id="forum">论坛内容面板</div>    <div class="tab-pane " id="security">安全内容面板</div>    <div class="tab-pane " id="welfare">公益内容面板</div></div>3
登录后复制

更多编程相关知识,请访问:编程视频!!

以上就是一起来了解下Bootstrap中的tab选项卡的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:自学微信小程序从零到一:项目构建后http请求封装
下一篇:详解Bootstrap中的信息提示框

发表评论

关闭广告
关闭广告