Bootstrap实现的标签页内容切换显示效果示例


Posted in Javascript onMay 25, 2017

本文实例讲述了Bootstrap实现的标签页内容切换显示效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Bootstrap 实例 - 标签页(Tab)插件</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
  <li class="active col-md-4"><a href="#dingcan" rel="external nofollow" data-toggle="tab">订餐</a></li>
  <li class="col-md-4"><a href="#yonghu" rel="external nofollow" data-toggle="tab">用户中心</a></li>
  <li class="col-md-4"><a href="#dingdan" rel="external nofollow" data-toggle="tab">订单中心</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="dingcan">
   <p>订餐</p>
  </div>
  <div class="tab-pane fade" id="yonghu">
   <p>用户中心</p>
  </div>
  <div class="tab-pane fade" id="dingdan">
   <p>订单中心</p>
  </div>
</div>
</body>
</html>
Javascript 相关文章推荐
深入分析Javascript跨域问题
Apr 17 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
理解javascript async的用法
Aug 22 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
node中的密码安全(加密)
Sep 17 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
React-router中结合webpack实现按需加载实例
May 25 #Javascript
node.js操作mongodb简单示例分享
May 25 #Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 #Javascript
node.js操作mysql简单实例
May 25 #Javascript
基于vue实现swipe分页组件实例
May 25 #Javascript
Javascript 实现匿名递归的实例代码
May 25 #Javascript
Kotlin学习第一步 kotlin语法特性
May 25 #Javascript
You might like
利用 window_onload 实现select默认选择
2006/10/09 PHP
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
python 图像增强算法实现详解
2021/01/24 Python
css3 transform属性详解
2014/09/30 HTML / CSS
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
安全责任协议书
2014/04/21 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书