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

jquery实现图片左右间隔滚动特效(可自动播放)

May 08 Javascript

非html5实现js版弹球游戏示例代码

Sep 22 Javascript

使用Node.js实现HTTP 206内容分片的教程

Jun 23 Javascript

EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)

Feb 21 Javascript

JavaScript的设计模式经典之建造者模式

Feb 24 Javascript

javascript表单事件处理方法详解

May 15 Javascript

详解Vue中添加过渡效果

Mar 20 Javascript

Angular2入门--架构总览

Mar 29 Javascript

vuex学习之Actions的用法详解

Aug 29 Javascript

JSON.stringify()方法讲解

Jan 31 Javascript

JS利用prototype给类添加方法操作详解

Jun 21 Javascript

JS中async/await实现异步调用的方法

Aug 28 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

Terran兵种对照表

2020/03/14 星际争霸

PHP实现PDO的mysql数据库操作类

2014/12/12 PHP

php实现获取文件mime类型的方法

2015/02/11 PHP

php 使用curl模拟登录人人(校内)网的简单实例

2016/06/06 PHP

PHP hex2bin()函数用法讲解

2019/02/25 PHP

【消息提示组件】，兼容IE6/7&&FF2

2007/09/04 Javascript

Jquery 数组操作大全个人总结

2013/11/13 Javascript

js截取小数点后几位的写法

2013/11/14 Javascript

js showModalDialog 弹出对话框的简单实例(子窗体)

2014/01/07 Javascript

《JavaScript DOM 编程艺术》读书笔记之DOM基础

2015/01/09 Javascript

js仿支付宝填写支付密码效果实现多方框输入密码

2016/03/09 Javascript

jQueryUI DatePicker 添加时分秒

2016/06/04 Javascript

基于jQuery和CSS3实现APPLE TV海报视差效果

2017/06/16 jQuery

详解angularjs获取元素以及angular.element()用法

2017/07/25 Javascript

Vue.js实现价格计算器功能

2020/03/30 Javascript

react 国际化的实现代码示例

2018/09/14 Javascript

使用 vue 实例更好的监听事件及vue实例的方法

2019/04/22 Javascript

解决vue 退出动画无效的问题

2020/08/09 Javascript

利用scrapy将爬到的数据保存到mysql（防止重复）

2018/03/31 Python

python 2.7.14安装图文教程

2018/04/08 Python

如何将 awk 脚本移植到 Python

2019/12/09 Python

Python类反射机制使用实例解析

2019/12/30 Python

Python图像处理之膨胀与腐蚀的操作

2021/02/07 Python

CSS3中颜色线性渐变实战

2015/07/18 HTML / CSS

HTML里显示pdf、word、xls、ppt的方法示例

2020/04/14 HTML / CSS

全球性的在线婚纱礼服工厂：27dress.com

2019/03/21 全球购物

《美丽的彩虹》教学反思

2014/02/25 职场文书

养生餐厅创业计划书范文

2014/03/26 职场文书

关爱留守儿童倡议书

2014/04/15 职场文书

警察先进个人事迹材料

2014/05/16 职场文书

农村党支部书记四风问题个人对照检查材料

2014/09/21 职场文书

2014年员工工作总结范文

2014/11/18 职场文书

2014年依法行政工作总结

2014/11/19 职场文书

幼儿园大班教师个人总结

2015/02/05 职场文书

大学班长竞选稿

2015/11/20 职场文书

《月球之谜》教学反思

2016/02/20 职场文书