Bootstrap 标签页Tab插件使用方法

标签页

Bootstrap标签页Tab插件需要 bootstrap-tab.js 文件支持，在使用该插件之前，应该导入 jQuery 和 bootstrap-tab.js 文件。

调用方式

1、data 属性调用

使用data 属性调用，无需编写任何JavaScript代码，只需定义基本的HTML结构即可：

首先，定义导航结构。所有导航链接的 data-toggle 属性值必须是 "tab"，href 属性值为对应内容面板的 id，以便单击标签时，能找到它所对应的内容面板。

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

其次，定义内容面板。内容面板的 id，要跟标签页的 href 属性值一一对应，并将所有的内容面板都放在一个 .tab-content 的容器中。

<div class="tab-content">
<div class="tab-pane active " id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>What up girl, this is Section 3.</p>
</div>
</div>

Bootstrap也支持胶囊式的标签导航，只需把 "nav-tabs" 替换为 "nav-pills"，还要把 data-toggle 的 "tabs" 替换为 "pill" 即可。如：

<ul class="nav nav-pills">
<li class="active"><a href="#tab1" data-toggle="pills">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>

2、JavaScript调用

通过JavaScript调用时，需要在每个链接的单击事件中调用 tab('show') 方法，来单独激活每个标签，并显示对应标签的内容框：

<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>

其中，e.preventDefault(); 阻止超链接的默认行为，$(this).tab('show'); 显示当前标签页对应的内容框。

除此之外，你还可以通过多种方式激活标签页：

$('#myTab a[href="#profile"]').tab('show'); // 选择href="#profile"的标签页
$('#myTab a:first').tab('show'); // 选择第一个标签页
$('#myTab a:last').tab('show'); // 选择最后一个标签页
$('#myTab li:eq(2) a').tab('show'); // 选择第三个标签页 (索引从 0 开始)
关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap 标签页Tab插件使用方法相关推荐

Bootstrap 标签页Tab插件的事件
事件 Bootstrap标签页Tab插件有两个事件,分别是 show 和 shown,这两个事件的含义见表 5‑3. 表 5‑3 标签页事件及含义事件含义 show 标签页显示之前,触发该事件.使 ...
bootstrap 标签页tab切换js（含报错原因）
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
待办事项桌面插件_让浏览器重获整洁——标签页管理插件：OneTabOneTab PlusToby...
1 什么是标签页管理插件 chrome浏览器虽然为用户提供了一个非常方便的打开新标签页的方法,但是随着用户浏览网页的时间增长,用户在一个chrome窗口中打开的标签页会越来越多,当这些标签页过多的时候 ...
bootstrap标签页
bootstrap标签页导航需要注意href="#home",这个home对应下面标签内容的的id的home名字要一样,不然不会切换 <ul id="myTa ...
「谷歌插件」这是一款我认为最好的标签页扩展插件
不知道大家每天早上第一时间打开浏览器看到的是什么画面? 是否也有人跟我一样在寻找一款完美的「标签页」插件,在用过Infinity.OneTab.Momentum等插件后,浏览器主页的美化追求的不过是内 ...
UI素材|标签页 Tab实用案例，可临摹学习
在导航类中有一种很基础也很重要的模块:tab选项卡与分段控件.它们功能一致,分别来自于安卓和苹果.其物理原型为书本上的小标签: 标签页 Tab 用于让用户在不同的视图中进行切换:标签数量,一般 2-4 ...
Edge浏览器使用 Infinity 新标签页 (Pro)插件
Edge浏览器安装Infinity 新标签页 (Pro)插件后,浏览器界面如下: 当关闭浏览器,再次打开时,界面又还原为: 这时我们点击浏览器右上角的3个点,在弹出界面点击"设置" ...
对话框中加入标签页的5种方法
(2008-07-08 15:25 博客搬家拾遗) 标签页是MFC控件里有一点难用的东西,今天看到了一篇相关文章,觉得写得比较系统,而且浅显易懂,特地转来,与大家分享的同时也留备自己以后查用. (以下 ...
使用bootstrap标签页
关键字:使用标签页,静态调用html页面(使用iframe内联框架) 完整代码如下: <!DOCTYPE html> <htmllang="en"> < ...

Bootstrap 标签页Tab插件使用方法

标签页

调用方式

Bootstrap 标签页Tab插件使用方法相关推荐

最新文章

热门文章