首页
所有分类
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 相关文章推荐
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
javascript基础知识讲解
Jan 11 Javascript
js中创建对象的几种方式
Feb 05 Javascript
jquery实现轮播图效果
Feb 13 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
详解webpack 热更新优化
Sep 13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
Element PageHeader页头的使用方法
Jul 26 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
scrapy(1) HttpClient(1) DeOldify(1) RestTemplate(1) 注解(1) BottomSheetDialog(1) ip2region(1) dataBinding(1) Quartz(1) 反射(1)
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
微信自定义分享php代码分析
2016/11/24 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
参考：关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
利用python批量检查网站的可用性
2016/09/09 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
JINS眼镜官方网站：日本最大的眼镜邮购
2016/10/14 全球购物
配件采购员岗位职责
2013/12/03 职场文书
向领导表决心的话
2014/03/11 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
董事长年会致辞
2015/07/29 职场文书
安全教育的主题班会
2015/08/13 职场文书
redis通过6379端口无法连接服务器（redis-server.exe闪退）
2021/05/08 Redis
微信小程序实现录音Record功能
2021/05/09 Javascript
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python