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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
js实现点赞按钮功能的实例代码
Mar 06 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
基于mysql的bbs设计(二)
2006/10/09 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
微信小程序的生命周期的详解
2017/10/19 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python 利用toapi库自动生成api
2020/10/19 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS