编程 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>

- Author -

骑小猪追火车

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

Javascript 相关文章推荐

htm调用JS代码

Mar 15 Javascript

javascript优先加载笔记代码

Sep 30 Javascript

jQuery zTree树插件动态加载实例代码

May 11 jQuery

react开发教程之React 组件之间的通信方式

Aug 12 Javascript

详解SPA中前端路由基本原理与实现方式

Sep 12 Javascript

基于jquery实现九宫格拼图小游戏

Nov 30 jQuery

微信小程序时间轴实现方法示例

Jan 14 Javascript

js实现多个倒计时并行 js拼团倒计时

Feb 25 Javascript

ElementUI多个子组件表单的校验管理实现

Nov 07 Javascript

JS实现网站楼层导航效果代码实例

Jun 16 Javascript

vue实现移动端项目多行文本溢出省略

Jul 29 Javascript

React 高阶组件HOC用法归纳

Jun 13 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

非常好的php目录导航文件代码

2006/10/09 PHP

PHP中设置时区方法小结

2012/06/03 PHP

php从数组中随机抽取一些元素的代码

2012/11/05 PHP

使用迭代器遍历文件信息的详解

2013/06/08 PHP

部署PHP项目应该注意的几点事项分享

2013/12/20 PHP

Linux系统中设置多版本PHP共存配合Nginx服务器使用

2015/12/21 PHP

JQuery开发的数独游戏代码

2010/10/29 Javascript

jQuery实现按钮只点击一次后就取消点击事件绑定的方法

2015/06/26 Javascript

jQuery仿淘宝网产品品牌隐藏与显示效果

2015/09/01 Javascript

js实现选中页面文字将其分享到新浪微博

2015/11/05 Javascript

基于jquery实现即时检查格式是否正确的表单

2016/05/06 Javascript

AngularJS页面传参的5种方式

2017/04/01 Javascript

JS匹配日期和时间的正则表达式示例

2017/05/12 Javascript

js断点调试心得分享(必看篇)

2017/12/08 Javascript

Angular4 反向代理Details实践

2018/05/30 Javascript

总结javascript三元运算符知识点

2018/09/28 Javascript

详解vue 在移动端体验上的优化解决方案

2019/05/20 Javascript

微信小程序wxml列表渲染原理解析

2019/11/27 Javascript

Angular进行简单单元测试的实现方法实例

2020/08/16 Javascript

[02:50]2014DOTA2 TI预选赛预选赛大神专访第一弹!

2014/05/21 DOTA

[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME

2016/03/03 DOTA

Python 元类使用说明

2009/12/18 Python

python通过socket查询whois的方法

2015/07/18 Python

详解python配置虚拟环境

2019/04/08 Python

Python箱型图绘制与特征值获取过程解析

2019/10/22 Python

python利用Excel读取和存储测试数据完成接口自动化教程

2020/04/30 Python

html+css3实现的登录界面

2020/12/09 HTML / CSS

世界上最好的威士忌和烈性酒购买网站：The Whisky Exchange

2016/11/20 全球购物

如何用Python输出一个Fibonacci数列

2016/08/28 面试题

通息工程毕业生自荐信

2013/10/16 职场文书

个人授权委托书

2014/04/03 职场文书

大学生党员学习焦裕禄精神思想汇报

2014/09/10 职场文书

2014年体育工作总结

2014/11/24 职场文书

2015年妇产科工作总结

2015/05/18 职场文书

赞助商致辞

2015/07/30 职场文书

Python 居然可以在 Excel 中画画你知道吗

2022/02/15 Python