Bootstrap中tab选项的示例分析-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

Bootstrap中tab选项的示例分析

这篇文章主要介绍了Bootstrap中tab选项的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了拉孜免费建站欢迎大家使用！

选项卡Tabs是Web中一种非常常用的功能。用户点击对菜单项，能切换出对应的内容。本文将详细介绍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 的值匹配



    公告
    规则
    论坛
    安全
    公益



    公告内容面板

规则内容面板

论坛内容面板

安全内容面板

公益内容面板

Bootstrap中tab选项的示例分析

【渐入效果】

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

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



    公告
    规则
    论坛
    安全
    公益



    公告内容面板

规则内容面板

论坛内容面板

公告

规则

论坛

安全

公益

公告内容面板规则内容面板论坛内容面板安全内容面板公益内容面板

公告

规则

论坛

安全

公益

公告内容面板规则内容面板论坛内容面板安全内容面板公益内容面板

show.bs.tab show方法调用之后立即触发该事件 shown.bs.tab 　　此事件在tab已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发 hide.bs.tab hide方法调用之后立即触发该事件。 hidden.bs.tab 　此事件在tab被隐藏（并且同时在 CSS 过渡效果完成）之后被触发

公告

规则

论坛

安全

公益

公告内容面板规则内容面板论坛内容面板安全内容面板公益内容面板

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

//show()方法用于触发show事件，调用activate原型方法，触发shown事件 Tab.prototype.show = function () { //当前tab var $this = this.element //找到最近的ul var $ul = $this.closest('ul:not(.dropdown-menu)') //找到data-target值 var selector = $this.data('target') //如果data-target值不存在，查找href值 if (!selector) { selector = $this.attr('href') //IE7特殊处理 selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') } //如果当前tab已经是活动状态了，即父元素li上已经有active样式的话，直接返回 if ($this.parent('li').hasClass('active')) return //找到上一个元素，即上一个带有active样式的li里的a元素 var $previous = $ul.find('.active:last a') //设置hide事件 var hideEvent = $.Event('hide.bs.tab', { relatedTarget: $this[0] }) //设置show事件 var showEvent = $.Event('show.bs.tab', { relatedTarget: $previous[0] }) //触发hide事件及show事件 $previous.trigger(hideEvent) $this.trigger(showEvent) //如果自定义回调中阻止了默认行为，则不再继续处理 if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return //要激活显示的面板，即target或href里的值所对应的元素 var $target = $(selector) //高亮显示当前tab this.activate($this.closest('li'), $ul) //显示对应的面板，并在回调里触发hidden及shown事件 this.activate($target, $target.parent(), function () { $previous.trigger({ type: 'hidden.bs.tab', relatedTarget: $this[0] }) $this.trigger({ type: 'shown.bs.tab', relatedTarget: $previous[0] }) }) } //active样式的应用，面板的显示和隐藏，以及tab的高亮与反高亮 Tab.prototype.activate = function (element, container, callback) { //查找当前容器所有有active样式的元素 var $active = container.find('> .active') //判断是使用回调还是动画 var transition = callback && $.support.transition && ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length) function next() { $active //去除其他元素的active样式 .removeClass('active') //包括li元素里面的下拉菜单里的active样式也要去除 .find('> .dropdown-menu > .active') .removeClass('active') .end() .find('[data-toggle="tab"]') .attr('aria-expanded', false) element //给当前被单击的元素添加active高亮样式 .addClass('active') .find('[data-toggle="tab"]') .attr('aria-expanded', true) if (transition) { //如果支持动画，就重绘页面 element[0].offsetWidth //并添加in样式，去除透明 element.addClass('in') } else { //否则删除fade element.removeClass('fade') } //如果单击的是下拉菜单里的项目 if (element.parent('.dropdown-menu').length) { element //打到最近的li.dropdown元素进行高亮 .closest('li.dropdown') .addClass('active') .end() .find('[data-toggle="tab"]') .attr('aria-expanded', true) } //如果有回调就执行回调 callback && callback() } //如果支持动画 $active.length && transition ? $active //在动画结束后执行next() .one('bsTransitionEnd', next) .emulateTransitionEnd(Tab.TRANSITION_DURATION) : next() $active.removeClass('in') }

function Plugin(option) { //根据选择器，遍历所有符合规则的元素 return this.each(function () { var $this = $(this) //获取自定义属性bs.tab的值 var data = $this.data('bs.tab') //如果值不存在，则将Tab实例设置为bs.tab值 if (!data) $this.data('bs.tab', (data = new Tab(this))) //如果option传递了string，则表示要执行某个方法 if (typeof option == 'string') data[option]() }) } var old = $.fn.tab //保留其他库的$.fn.tab代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码 $.fn.tab = Plugin //重设插件构造器，可以通过该属性获取插件的真实类函数 $.fn.tab.Constructor = Tab

var clickHandler = function (e) { //阻止默认行为 e.preventDefault() //触发show()方法 Plugin.call($(this), 'show') } $(document) //在document上绑定单击事件 .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler) .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)

新闻中心

基本用法

JS触发

JS源码

其他资讯