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

js 静态动态成员 and 信息的封装和隐藏

May 29 Javascript

jquery.ajax的url中传递中文乱码问题的解决方法

Feb 07 Javascript

网站接入QQ登录的两种方法

Jul 22 Javascript

浅析node.js中close事件

Nov 26 Javascript

js实现超简单的展开、折叠目录代码

Aug 28 Javascript

javascript高级选择器querySelector和querySelectorAll全面解析

Apr 07 Javascript

JavaScript省市级联下拉菜单实例

Feb 14 Javascript

angular2中router路由跳转navigate的使用与刷新页面问题详解

May 07 Javascript

Vue CLI 2.x搭建vue(目录最全分析)

Feb 27 Javascript

使用 Vue cli 3.0 构建自定义组件库的方法

Apr 30 Javascript

微信小程序bindtap事件与冒泡阻止详解

Aug 08 Javascript

详解datagrid使用方法（重要）

Nov 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

打造计数器DIY三步曲（中）

2006/10/09 PHP

PHP SPL标准库之数据结构栈(SplStack)介绍

2015/05/12 PHP

PHP register_shutdown_function()函数的使用示例

2015/06/23 PHP

PHP中的静态变量及static静态变量使用详解

2015/11/05 PHP

详解php用static方法的原因

2018/09/12 PHP

js客户端快捷键管理类的较完整实现和应用

2010/06/08 Javascript

一次失败的jQuery优化尝试小结

2011/02/06 Javascript

javascript调试之DOM断点调试法使用技巧分享

2014/04/15 Javascript

Javascript 读取操作Sql中的Xml字段

2014/10/09 Javascript

JS实现从表格中动态删除指定行的方法

2015/03/31 Javascript

AngularJS 模块化详解及实例代码

2016/09/14 Javascript

详解webpack2+node+react+babel实现热加载(hmr)

2017/08/24 Javascript

AngularJS表单验证功能

2017/10/19 Javascript

bootstrap 弹出框modal添加垂直方向滚轴效果

2018/07/09 Javascript

微信小程序之自定义组件的实现代码（附源码）

2018/08/02 Javascript

axios+Vue实现上传文件显示进度功能

2019/04/14 Javascript

微信小程序用户授权、位置授权及获取微信绑定手机号

2019/07/18 Javascript

Windows下安装 node 的版本控制工具 nvm

2020/02/06 Javascript

[23:21]Ti4 冒泡赛第二轮DK vs C9 2

2014/07/14 DOTA

python创建和删除目录的方法

2015/04/29 Python

在Python的Django框架中更新数据库数据的方法

2015/07/17 Python

Python探索之实现一个简单的HTTP服务器

2017/10/28 Python

Python类装饰器实现方法详解

2018/12/21 Python

浅析Python的命名空间与作用域

2020/11/25 Python

泰海淘：泰国king Power王权免税集团旗下跨境海淘综合型电商

2020/07/26 全球购物

PHP如何对用户密码进行加密

2014/07/31 面试题

平面网站制作专科生的自我评价分享

2013/12/11 职场文书

会计系中文个人求职信

2013/12/24 职场文书

幼儿园教师教育感言

2014/02/28 职场文书

李开复演讲稿

2014/05/24 职场文书

大三学年自我鉴定范文（3篇）

2014/09/28 职场文书

2014年干部培训工作总结

2014/12/17 职场文书

绍兴鲁迅故居导游词

2015/02/09 职场文书

2016年春季趣味运动会开幕词

2016/03/04 职场文书

新手，如何业余时间安排好写作、提高写作能力？

2019/10/21 职场文书

go web 预防跨站脚本的实现方式

2021/06/11 Golang