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 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JavaScript数组复制详解
Feb 02 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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
牡丹941资料
2021/03/01 无线电
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
违章停车检讨书
2014/10/21 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS