编程 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英文日期（有时间）选择器

May 02 Javascript

网页图片延时加载的js代码

Apr 22 Javascript

基于jquery循环map功能的代码

Feb 26 Javascript

js中各浏览器中鼠标按键值的差异

Apr 07 Javascript

深入理解JavaScript系列（15）函数（Functions）

Apr 12 Javascript

js实现鼠标感应向下滑动隐藏菜单的方法

Feb 20 Javascript

jQuery使用toggleClass方法动态添加删除Class样式的方法

Mar 26 Javascript

基于jQuery实现的向下滑动二级菜单效果代码

Aug 31 Javascript

JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

Oct 27 Javascript

webpack配置打包后图片路径出错的解决

Apr 26 Javascript

vue 中swiper的使用教程

May 22 Javascript

vue 刷新之后嵌套路由不变重新渲染页面的方法

Sep 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编码转换问题

2015/07/28 PHP

php数组指针操作详解

2017/02/14 PHP

详解thinkphp中的volist标签

2018/01/15 PHP

PHP中str_split()函数的用法讲解

2019/04/11 PHP

计算世界完全对称日的js代码，粗糙版

2011/11/04 Javascript

javascript创建数组之联合数组的使用方法示例

2013/12/26 Javascript

跟我学习javascript的undefined与null

2015/11/17 Javascript

js时间比较 js计算时间差的简单实现方法

2016/08/26 Javascript

jQuery实现的图片轮播效果完整示例

2016/09/12 Javascript

在 Angular2 中实现自定义校验指令（确认密码）的方法

2017/01/23 Javascript

ES6学习笔记之Set和Map数据结构详解

2017/04/07 Javascript

JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

2017/07/07 Javascript

AngualrJs清除定时器遇到的坑

2017/10/13 Javascript

Angular @HostBinding()和@HostListener()用法

2018/03/05 Javascript

浅谈express.js框架中间件（middleware）

2019/04/07 Javascript

electron 安装，调试，打包的具体使用

2019/11/06 Javascript

详解如何在JS代码中消灭for循环

2019/12/11 Javascript

Vue实现input宽度随文字长度自适应操作

2020/07/29 Javascript

Vue+Element自定义纵向表格表头教程

2020/10/26 Javascript

[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4

2018/06/05 DOTA

Python基于csv模块实现读取与写入csv数据的方法

2018/01/18 Python

python 对多个csv文件分别进行处理的方法

2019/01/07 Python

在django模板中实现超链接配置

2019/08/21 Python

django xadmin action兼容自定义model权限教程

2020/03/30 Python

阿玛尼美妆加拿大官方商城：Giorgio Armani Beauty加拿大

2017/10/24 全球购物

英国足球店：UK Soccer Shop

2017/11/19 全球购物

初一学生评语大全

2014/04/24 职场文书

学校花圃的标语

2014/06/18 职场文书

劳动仲裁代理词范文

2015/05/25 职场文书

八月迷情观后感

2015/06/11 职场文书

2015年中学总务处工作总结

2015/07/22 职场文书

机关单位2016年创先争优活动总结

2016/04/05 职场文书

python 模块重载的五种方法

2021/04/24 Python

总结Pyinstaller打包的高级用法

2021/06/28 Python

详解Vue项目的打包方式(生成dist文件)

2022/01/18 Vue.js

Python时间操作之pytz模块使用详解

2022/06/14 Python