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

JavaScipt基本教程之JavaScript语言的基础

Jan 16 Javascript

javascript 强制刷新页面的实现代码

Dec 13 Javascript

ExtJS自定义主题（theme）样式详解

Nov 18 Javascript

JavaScript使用二分查找算法在数组中查找数据的方法

Apr 07 Javascript

javascript中new关键字详解

Dec 14 Javascript

AngularJs ng-route路由详解及实例代码

Sep 14 Javascript

利用transition实现文字上下抖动的效果

Jan 21 Javascript

jquery PrintArea 实现票据的套打功能(代码)

Mar 17 Javascript

详解js正则表达式验证时间格式xxxx-xx-xx形式

Feb 09 Javascript

在Vue-cli里应用Vuex的state和mutations方法

Sep 16 Javascript

JavaScript定时器常见用法实例分析

Nov 15 Javascript

vue element el-transfer增加拖拽功能

Jan 15 Vue.js

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记录代码执行时间(实现代码)

2013/07/05 PHP

ThinkPHP的截取字符串函数无法显示省略号的解决方法

2014/06/25 PHP

js实现DIV的一些简单控制

2007/06/04 Javascript

JS request函数用来获取url参数

2010/05/17 Javascript

浅析XMLHttpRequest的缓存问题

2013/12/13 Javascript

鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

2013/12/14 Javascript

javascript组合使用构造函数模式和原型模式实例

2015/06/04 Javascript

Javascript验证Visa和MasterCard信用卡号的方法

2015/07/27 Javascript

javascript学习笔记整理（概述、变量、数据类型简介）

2015/10/25 Javascript

详解Webwork中Action 调用的方法

2016/02/02 Javascript

Node.js的项目构建工具Grunt的安装与配置教程

2016/05/12 Javascript

JS使用正则表达式过滤多个词语并替换为相同长度星号的方法

2016/08/03 Javascript

node安装--linux下的快速安装教程

2017/03/21 Javascript

JS开发中百度地图+城市联动实现实时触发查询地址功能

2017/04/13 Javascript

js表单序列化判断空值的实例

2017/09/22 Javascript

vue项目总结之文件夹结构配置详解

2017/12/13 Javascript

基于打包工具Webpack进行项目开发实例

2018/05/29 Javascript

jQuery实现仿京东防抖动菜单效果示例

2018/07/06 jQuery

深度解读vue-resize的具体用法

2020/07/08 Javascript

JavaScript实现矩形块大小任意缩放

2020/08/25 Javascript

Python实现爬取马云的微博功能示例

2019/02/16 Python

对python中if语句的真假判断实例详解

2019/02/18 Python

Python sql注入过滤字符串的非法字符实例

2020/04/03 Python

HTML5梦幻之旅——炫丽的流星雨效果实现过程

2013/08/06 HTML / CSS

美国地毯购买网站：Rugs USA

2019/02/23 全球购物

俄罗斯购买剧院和演唱会门票网站：Parter.ru

2019/11/09 全球购物

销售顾问的岗位职责

2013/11/13 职场文书

校园之声广播稿

2014/01/31 职场文书

中班开学寄语

2014/04/04 职场文书

2014年幼儿园教学工作总结

2014/12/04 职场文书

服装店员工管理制度

2015/08/07 职场文书

优秀教师主要事迹材料

2015/11/04 职场文书

高中政治教师教学反思

2016/02/23 职场文书

简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl

2021/03/31 HTML / CSS

Python docx库删除复制paragraph及行高设置图片插入示例

2022/07/23 Python

keepalived + nginx 实现高可用方案

2022/12/24 Servers