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

动态加载iframe

Jun 16 Javascript

window.showModalDialog使用手册

Jan 11 Javascript

初试jQuery EasyUI 使用介绍

Apr 01 Javascript

网络之美 JavaScript中Get和Set访问器的实现代码

Sep 19 Javascript

让你的CSS像Jquery一样做筛选的实现方法

Jul 10 Javascript

图片Slider 带左右按钮的js示例

Aug 30 Javascript

使用jQuery解决IE与FireFox下createElement方法的差异

Nov 14 Javascript

JavaScript关于提高网站性能的几点建议(一)

Jul 24 Javascript

Easyui的组合框的取值与赋值

Oct 28 Javascript

基于jQuery实现Ajax验证用户名是否可用实例

Mar 25 jQuery

微信小程序首页的分类功能和搜索功能的实现思路及代码详解

Sep 11 Javascript

javascript异常处理实现原理详解

Feb 17 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

用ＰＨＰ和ＡＣＣＥＳＳ写聊天室(五)

2006/10/09 PHP

php 模拟POST提交的2种方法详解

2013/06/17 PHP

一致性哈希算法以及其PHP实现详细解析

2013/08/24 PHP

JavaScript多线程的实现方法

2007/05/08 Javascript

JQuery 自定义CircleAnimation，Animate方法学习笔记

2011/07/10 Javascript

javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)

2012/06/20 Javascript

JQUERY对单选框(radio)操作的小例子

2013/04/25 Javascript

jQuery中获取Radio元素值的方法

2013/07/02 Javascript

关于JavaScript对象的动态选择及遍历对象

2014/03/10 Javascript

JQuery 的跨域方法推荐_可跨任何网站

2016/05/18 Javascript

AngularJS中$watch和$timeout的使用示例

2016/09/20 Javascript

微信小程序 loading 详解及实例代码

2016/11/09 Javascript

jQuery实现文档树效果

2017/02/20 Javascript

AngularJS常见过滤器用法实例总结

2017/07/06 Javascript

详解vue的diff算法原理

2018/05/20 Javascript

vue自定v-model实现表单数据双向绑定问题

2018/09/03 Javascript

vue 表单验证按钮事件交由父组件触发的方法

2018/12/17 Javascript

javascript系统时间设置操作示例

2019/06/17 Javascript

原生js实现的金山打字小游戏（实例代码详解）

2020/03/16 Javascript

vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

2020/07/27 Javascript

使用typescript快速开发一个cli的实现示例

2020/12/09 Javascript

Python开发WebService系列教程之REST,web.py,eurasia,Django

2014/06/30 Python

python导出chrome书签到markdown文件的实例代码

2017/12/27 Python

Python3生成手写体数字方法

2018/01/30 Python

Python动态参数/命名空间/函数嵌套/global和nonlocal

2019/05/29 Python

深入浅析python的第三方库pandas

2020/02/13 Python

关于h5中的fetch方法解读(小结)

2017/11/15 HTML / CSS

土耳其家居建材网站：Koçtaş

2016/11/22 全球购物

享受加州生活方式的时尚舒适：XCVI

2018/07/09 全球购物

师范应届生求职信

2013/11/15 职场文书

幼儿老师求职信

2014/06/30 职场文书

ktv好的活动方案

2014/08/17 职场文书

2014离婚协议书范文

2014/09/10 职场文书

杭州黄龙洞导游词

2015/02/10 职场文书

浅谈CSS不规则边框的生成方案

2021/05/25 HTML / CSS

如何用PHP websocket实现网页实时聊天

2021/05/26 PHP