Bootstrap标签页（Tab）插件使用方法

您可以通过以下两种方式启用标签页：

1、通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-tabs"> 

<li><a href="#identifier" rel="external nofollow" data-toggle="tab">Home</a></li> 

... 

</ul>

2、通过 JavaScript：您可以使用 Javscript 来启用标签页，如下所示：

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

3、如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容

<div class="tab-content">
 <div class="tab-pane fade in active" id="home">...</div>
 <div class="tab-pane fade" id="svn">...</div>
 <div class="tab-pane fade" id="ios">...</div>
 <div class="tab-pane fade" id="java">...</div></div>

html代码

<body>
  <div class="container">
  <ul id="myTab" class="nav nav-tabs">
   <li class="active">
    <a href="#home" rel="external nofollow" data-toggle="tab"> W3Cschool Home </a>
   </li>
   <li>
    <a href="#ios" rel="external nofollow" data-toggle="tab">iOS</a>
   </li>
   <li class="dropdown">
    <a href="#" rel="external nofollow" id="myTabDrop1" class="dropdown-toggle"data-toggle="dropdown">Java <b class="caret"></b> </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
     <li>
      <a href="#jmeter" rel="external nofollow" tabindex="-1" data-toggle="tab">jmeter</a>
     </li>
     <li>
      <a href="#ejb" rel="external nofollow" tabindex="-1" data-toggle="tab">ejb</a>
     </li>
    </ul>
   </li>
  </ul>
  <div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
    <p>
     W3CschooolW3Cschool教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——从W3Cschool开始。
    </p>
   </div>
   <div class="tab-pane fade" id="ios">
    <p>
     iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
     TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
    </p>
   </div>
   <div class="tab-pane fade" id="jmeter">
    <p>
     jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
    </p>
   </div>
   <div class="tab-pane fade" id="ejb">
    <p>
     Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
    </p>
   </div>
  </div>
  </div>
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 </body>

效果图

参考地址：http://www.w3cschool.cn/bootstrap/bootstrap-tab-plugin.html

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程 Bootstrap Table使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Bootstrap的标签页组件及bootstrap-tab使用说明

    基于Bootstrap的标签页组件及bootstrap-tab使用说明

    bootstrap-tab bootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用,主要包含以下功能: tab页初始化 关闭tab页 新增tab 显示tab页 获取tab页ID 使用 Step1 :引入样式 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <

  • bootstrap table配置参数例子

    bootstrap-table的一些配置参数: $('#reportTable').bootstrapTable({ method: 'post', url: '/qStock/AjaxPage', dataType: "json", striped: true, //使表格带有条纹 pagination: true, //在表格底部显示分页工具栏 pageSize: 22, pageNumber: 1, pageList: [10, 20, 50, 100, 200, 500], i

  • Bootstrap table两种分页示例

    Bootstrap table服务器端分页和客户端分页,供大家参考,具体内容如下 服务器端分页 注意服务器端数据的返回的格式 [json]必须包含:total节点(总记录数),rows节点(分页后数据) 即:{"total":24,"rows":[-]} $('#test-table').bootstrapTable({ //请求方法 method: 'get', //是否显示行间隔色 striped: true, //是否使用缓存,默认为true,所以一般情况下需

  • 简单实现Bootstrap标签页

    本文实例为大家分享了Bootstrap标签页的具体实现代码,供大家参考,具体内容如下 HTML代码: <div id="tabs"> <ul class="nav nav-tabs"> <li class="active"><a href="#item1" data-toggle="tab">项目一</a></li> <li>

  • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • Bootstrap每天必学之标签页（Tab）插件

    Bootstrap每天必学之标签页（Tab）插件

    标签页(Tab)通过结合一些 data 属性,您可以轻松地创建一个标签页界面. "如果您想要单独引用该插件的功能,那么您需要引用 tab.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js." 一.用法 您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚

  • BootStrapTable 单选及取值的实现方法

    BootStrapTable 单选及取值的实现方法

    学习bootstrapTable 一直没有找到 单选框的选定的和取值的教程,今天写一个.作为笔记 1. 效果图: 点击 bootstrapTable 单选的按钮, 选中该列, 取到该列的所有值. 2. js 代码 : bootstrapTable 初始化 a. 注意: singleSelect : true, // 单选checkbox columns : [ { checkbox: true } ] // bootstrapTable 显示单选checkbox 列 $().ready(func

  • bootstrap table 数据表格行内修改的实现代码

    js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == '') { return '不能为空';//修改是数据为空 显示 } } } js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el)

  • AngularJS标签页tab选项卡切换功能经典实例详解

    AngularJS标签页tab选项卡切换功能经典实例详解

    本文实例讲述了AngularJS实现标签页tab选项卡功能.分享给大家供大家参考,具体如下: 选项卡一: JavaScript+html+css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net js标签页tab切换</title> <style> #div1 .active{ background:blue

  • Bootstrap标签页（Tab）插件使用方法

    Bootstrap标签页（Tab）插件使用方法

    您可以通过以下两种方式启用标签页: 1.通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式. <ul class="nav nav-tabs"> <li><a

  • Bootstrap标签页（Tab）插件切换echarts不显示问题的解决

    问题: 1.  在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 2.  echarts自适应怎么实现? 解决办法: //解决tab切换不显示问题 在加载窗口后重新渲染. $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) { for(var i = 0; i < charts.length; i+

  • Bootstrap开发中Tab标签页切换图表显示问题的解决方法

    Bootstrap开发中Tab标签页切换图表显示问题的解决方法

    前言 在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其他页面的时候显示内容没有发生动态的调整,本篇随笔介绍解决Tab标签页切换图表显示问题,以及图表控件可以实现窗口动态变化进行调整尺寸. 1)常规的图表处理 例如下面界面有两个Tab标签页,如下所示,第一个标签页显示正常. 部分界面代码如下所示 <div class="portlet-bod

  • 如何在Vue.js中实现标签页组件详解

    如何在Vue.js中实现标签页组件详解

    前言 标签页组件,即实现选项卡切换,常用于平级内容的收纳与展示. 因为每个标签页的内容是由使用组件的父级控制的,即这部分内容为一个 slot.所以一般的设计方案是,在 slot 中定义多个 div,然后在接到切换消息时,再显示或隐藏相关的 div.这里面就把相关的交互逻辑也编写进来了,我们希望在组件中处理这些交互逻辑,slot 只单纯处理业务逻辑.这可以通过再定义一个 pane 组件来实现,pane 组件嵌在 tabs 组件中. 1 基础版 因为 tabs 组件中的标题是在 pane 组件中定义

  • bootstrap-closable-tab可实现关闭的tab标签页插件

    本文实例为大家分享了bootstrap-closable-tab可实现关闭的tab标签页的具体代码,供大家参考,具体内容如下 Demo下载地址:bootstrapclosabletab_jb51.rar 这是从网上找的一款可以关闭的tab标签页插件: 1.这是基于bootstrap的插件,因此要引入bootstrap的相关插件 前提得引入jquery: 2.引入该插件: 代码如下: //子页面不用iframe,用div展示 var closableTab = { //添加tab addTab:f

  • js与jquery分别实现tab标签页功能的方法

    本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2

  • Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 2.依然在app.vue文件中,添加样式 不用在任何位置加class,只要在css中写上这个名称,样式自己随意改. 如何在单页切换的时候添加过渡? 1.在app.vue文件中,将router-view包裹在transition中,transition加个name. 2.在app.vue中添加css样式(你的transition的name是什么,第一个单词就是什么) 以上

随机推荐