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简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
JS实现的自定义map方法示例
May 17 Javascript
elementUI select组件value值注意事项详解
May 29 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
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php遍历目录方法小结
2015/03/10 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python字符串常用方法
2018/06/14 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python制作填词游戏步骤详解
2019/05/05 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
拾金不昧的表扬信
2014/01/16 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
志愿者活动总结范文
2014/04/26 职场文书
冬季安全检查方案
2014/05/23 职场文书
施工质量承诺书范文
2014/05/30 职场文书
平安工地汇报材料
2014/08/19 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
教师个人年终总结
2015/02/11 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers