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 相关文章推荐
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python httplib模块使用实例
2015/04/11 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
护士自我鉴定怎么写
2014/02/07 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
个人公开承诺书
2014/03/28 职场文书
就业意向书范文
2014/04/01 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
节电标语大全
2014/06/23 职场文书
员工辞职信怎么写
2015/02/27 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
心灵捕手观后感
2015/06/02 职场文书
《包身工》教学反思
2016/02/23 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android