首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

- Author -

骑小猪追火车

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
详解JSON1：使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
Node.js五大应用性能技巧小结（必须收藏）
Aug 09 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）
Aug 12 Javascript
js实现tab栏切换效果
Aug 02 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
竞聘书(31) 主持词(345) 意向书(73) 承诺书(369) 责任书(145) 广告词(105) 建议书(203) 聘任书(31) 担保书(46) 委托书(259)
You might like
PHP对字符串的递增运算分析
2010/08/08 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
js异步加载的三种解决方案
2013/03/04 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python 实现插入排序算法
2012/06/05 Python
Pycharm学习教程（7）虚拟机VM的配置教程
2017/05/04 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
python距离测量的方法
2018/03/06 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python如何爬取动态网站
2020/09/09 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
JD Sports法国：英国篮球和运动时尚的领导者
2017/09/28 全球购物
美国最大的购物网站：Amazon.com（亚马逊美国）
2020/05/23 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
详解MySQL的半同步
2021/04/22 MySQL