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绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
JS代码简洁方式之函数方法详解
Jul 28 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
php4的session功能评述(三)
2006/10/09 PHP
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
js onload处理html页面加载之后的事件
2013/10/30 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Django添加feeds功能的示例
2018/08/07 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
元旦晚会邀请函
2014/02/01 职场文书
经典广告词大全
2014/03/14 职场文书
歌唱比赛主持词
2014/03/18 职场文书
村道德模范事迹材料
2014/08/28 职场文书
新郎结婚保证书
2015/02/26 职场文书
工作试用期自我评价
2015/03/10 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers