Bootstrap JavaScript插件:可切换标签 (tab.js)

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

一个可切换的标签导航包含两部分内容,一个是标签导航,一个是内容面板。每个标签都有一个对应的内容面板,当标签发生切换时,自动切换到相应的内容面板。内容面板如下:

<div class="tab-content">
	<div class="tab-pane active" id="tab1" role="tabpanel">
		<p>第一部分</p>
	</div>
	<div class="tab-pane" id="tab2" role="tabpanel">
		<p>第二部分</p>
	</div>
	<div class="tab-pane" id="tab3" role="tabpanel">
		<p>第三部分</p>
	</div>
</div>

其次,定义标签导航。所有链接的 data-toggle 属性值必须是 “tab”,href 属性值为对应内容面板的 id

<ul class="nav nav-tabs" role="tablist">
	<li class="active" role="presentation"><a href="#tab1" data-toggle="tab" role="tab">part 1</a></li>
	<li role="presentation"><a href="#tab2" data-toggle="tab" role="tab">part 2</a></li>
	<li role="presentation"><a href="#tab3" data-toggle="tab" role="tab">part 3</a></li>
</ul>

最后,为了兼容IE早期版本,使整个标签导航具有可布局性,防止布局发生环绕和错位现象,Bootstrap还将标签导航和内容面板放在一个 .tabbable 容器中。

<div class="tabbable">...</div>

可切换完整代码如下:

<div class="tabbable">
    <ul class="nav nav-tabs" role="tablist">
	    <li class="active" role="presentation"><a href="#tab1" data-toggle="tab" role="tab">part 1</a></li>
	    <li role="presentation"><a href="#tab2" data-toggle="tab" role="tab">part 2</a>        </li>
	    <li role="presentation"><a href="#tab3" data-toggle="tab" role="tab">part 3</a>    </li>
    </ul>
    <div class="tab-content">
	    <div class="tab-pane active" id="tab1" role="tabpanel">
		    <p>第一部分</p>
	    </div>
	    <div class="tab-pane" id="tab2" role="tabpanel">
		    <p>第二部分</p>
	    </div>
	    <div class="tab-pane" id="tab3" role="tabpanel">
		    <p>第三部分</p>
	    </div>
    </div>
</div>

静态效果如下(实际效果需要复制代码在浏览器中查看):
在这里插入图片描述

1. 通过 data 属性调用

只需在元素上指定data-toggle=“tab”或data-toggle=“pill”,就可以激活选项卡或胶囊式标签页,而无需编写任何JavaScript。将nav和nav tabs类添加到tabul将应用引导选项卡样式,而添加nav和nav pills类将应用pill样式。具体用法参照以上代码。

2. 通过 JavaScript 调用

通过JavaScript启用选项卡(每个选项卡需要单独激活),代码如下:

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

选项卡淡入淡出

要使选项卡淡入,请在每个.tab-pane窗格中添加.fade。第一个选项卡窗格还必须具有.in才能使初始内容可见。

 <div class="tab-content">
	    <div class="tab-pane fade in  active" id="tab1" role="tabpanel">
		    <p>第一部分</p>
	    </div>
	    <div class="tab-pane fade" id="tab2" role="tabpanel">
		    <p>第二部分</p>
	    </div>
	    <div class="tab-pane fade" id="tab3" role="tabpanel">
		    <p>第三部分</p>
	    </div>
    </div>

方法

$().tab
激活选项卡元素和内容容器。Tab应该有一个针对DOM中容器节点的数据目标或href。在上面的示例中,选项卡是具有data-toggle=“tab”属性的<a>标签。

.tab(‘show’)
选择给定选项卡并显示其关联内容。先前选定的任何其他选项卡都将取消选中,并且其关联内容将隐藏。


事件

显示新选项卡时,事件按以下顺序触发:

  1. hide.bs.tab(在当前活动选项卡上)
  2. show.bs.tab(在“待显示”选项卡上)
  3. hidden.bs.tab(在上一个活动选项卡上,与hide.bs.tab事件)
  4. shown.bs.tab(在刚刚显示的新活动选项卡上,与show.bs.tab事件

如果没有选项卡已处于活动状态,则 hide.bs.tab 以及 hidden.bs.tab 不会触发事件。

事件类型事件描述
show.bs.tab此事件在选项卡显示时激发,但在显示新选项卡之前。使用event.target以及event.relatedTarget分别针对活动选项卡和上一个活动选项卡(如果可用)
shown.bs.tab此事件在选项卡显示后在tab show上激发。使用event.target以及event.relatedTarget分别针对活动选项卡和上一个活动选项卡(如果可用)。
hide.bs.tab此事件在要显示新选项卡时激发(因此前一个活动选项卡将被隐藏)。使用event.target以及event.relatedTarget分别针对当前的活动选项卡和即将启用的新选项卡。
hidden.bs.tab此事件在显示新选项卡后激发(因此前一个活动选项卡被隐藏)。使用event.target以及event.relatedTarget分别针对上一个活动选项卡和新活动选项卡。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

就先分享到这里!! 😄 后续继续更新!!

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页