Bootstrap标签页(Tab)插件使用方法


Posted in Javascript onMarch 21, 2017

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

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>

效果图

Bootstrap标签页(Tab)插件使用方法

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery find和children方法使用
Jan 31 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
jQuery定义插件的方法
Dec 18 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
JavaScript数组和对象的复制
Mar 21 #Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 #Javascript
zTree实现节点修改的实时刷新功能
Mar 20 #Javascript
Vue指令的钩子函数使用方法
Mar 20 #Javascript
非常实用的vue导航钩子
Mar 20 #Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
如何解决vue与传统jquery插件冲突
Mar 20 #Javascript
You might like
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python打印不合法的文件名
2020/07/31 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python爬虫 requests-html的使用
2020/11/30 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
预备党员入党思想汇报
2014/01/04 职场文书
学生出入校管理制度
2014/01/16 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
给老婆的道歉信
2015/01/20 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
毕业班工作总结
2015/08/10 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android