编程 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 相关文章推荐

深入分析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 职场文书