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

Save a File Using a File Save Dialog Box

Jun 18 Javascript

jquery事件preventDefault()方法用法实例

Jan 16 Javascript

JavaScript SweetAlert插件实现超酷消息警告框

Jan 28 Javascript

Bootstrap每天必学之导航条(二)

Mar 01 Javascript

webpack2.0搭建前端项目的教程详解

Apr 05 Javascript

react-native组件中NavigatorIOS和ListView结合使用的方法

Sep 30 Javascript

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

Aug 02 Javascript

vue form check 表单验证的实现代码

Dec 09 Javascript

JavaScript代码调试方法实例小结

Jan 05 Javascript

记一次用ts+vuecli4重构项目的实现

May 21 Javascript

通过vue刷新左侧菜单栏操作

Aug 06 Javascript

利用node.js开发cli的完整步骤

Dec 29 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从数组中随机抽取一些元素的代码

2012/11/05 PHP

解析curl提交GET,POST,Cookie的简单方法

2013/06/29 PHP

PHP删除指定目录中的所有目录及文件的方法

2015/02/26 PHP

JavaScript中的匀速运动和变速(缓冲)运动详细介绍

2012/11/11 Javascript

使用jquery获取网页中图片高度的两种方法

2013/09/26 Javascript

利用js正则表达式验证手机号,email地址,邮政编码

2014/01/23 Javascript

Javascript实现禁止输入中文或英文的例子

2014/12/09 Javascript

JavaScript实现表格点击排序的方法

2015/05/11 Javascript

javascript函数式编程程序员的工具集

2015/10/11 Javascript

信息页文内画中画广告js实现代码(文中加载广告方式)

2016/01/03 Javascript

想学习javascript JS和jQuery哪个重要先学哪个

2016/12/11 Javascript

移动端web滚动分页的实现方法

2017/05/05 Javascript

关于vue-router路径计算问题

2017/05/10 Javascript

vue中的自定义分页插件组件的示例

2018/08/18 Javascript

Vue中使用sass实现换肤功能

2018/09/07 Javascript

vue使用keep-alive保持滚动条位置的实现方法

2019/04/09 Javascript

老生常谈Python进阶之装饰器

2017/05/11 Python

Python实现OpenCV的安装与使用示例

2018/03/30 Python

使用pandas对矢量化数据进行替换处理的方法

2018/04/11 Python

Python3+django2.0+apache2+ubuntu14部署网站上线的方法

2018/07/07 Python

Flask框架配置与调试操作示例

2018/07/23 Python

Python爬取商家联系电话以及各种数据的方法

2018/11/10 Python

python中aioysql(异步操作MySQL)的方法

2019/04/11 Python

Python HTMLTestRunner可视化报告实现过程解析

2020/04/10 Python

Python安装并操作redis实现流程详解

2020/10/13 Python

Python实现哲学家就餐问题实例代码

2020/11/09 Python

python中_del_还原数据的方法

2020/12/09 Python

css3.0 图形构成实例练习二

2013/03/19 HTML / CSS

美国名牌太阳镜折扣网站：Eyedictive

2017/05/15 全球购物

英国最大的在线时尚眼镜店：Eyewearbrands

2019/03/12 全球购物

NYX Professional Makeup俄罗斯官网：世界知名的化妆品品牌

2019/12/26 全球购物

MYSQL基础面试题

2012/05/13 面试题

公司年底活动方案

2014/08/17 职场文书

企业优秀团员事迹材料

2014/08/20 职场文书

优秀党员先进事迹材料

2014/12/18 职场文书