Bootstrap3实用教程
4.6.1 标签页插件的调用方式
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验