编程 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实现代码[IE暂不支持]

May 24 Javascript

js判断是否为ie的方法小结

Jan 13 Javascript

Jquery+asp.net后台数据传到前台js进行解析的方法

May 11 Javascript

浅谈JavaScript的全局变量与局部变量

Jun 10 Javascript

JS控制层作圆周运动的方法

Jun 20 Javascript

Vue单文件组件的如何使用方式介绍

Jul 28 Javascript

BootStrap给table表格的每一行添加一个按钮事件

Sep 07 Javascript

微信小程序项目实践之九宫格实现及item跳转功能

Jul 19 Javascript

利用Vconsole和Fillder进行移动端抓包调试方法

Mar 05 Javascript

es6函数name属性功能与用法实例分析

Apr 18 Javascript

vue使用nprogress加载路由进度条的方法

Jun 04 Javascript

Vue-router编程式导航的两种实现代码

Mar 04 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原理的opcodes(操作码)

2010/10/26 PHP

2014年最新推荐的10款 PHP 开发框架

2014/08/01 PHP

PHP实现简单实用的验证码类

2015/07/29 PHP

PHP实现QQ快速登录的方法

2016/09/28 PHP

微信开发之php表单微信中自动提交两次问题解决办法

2017/01/08 PHP

php加速缓存器opcache，apc，xcache，eAccelerator原理与配置方法实例分析

2020/03/02 PHP

json原理分析及实例介绍

2012/11/29 Javascript

JS中类或对象的定义说明

2014/03/10 Javascript

当前流行的JavaScript代码风格指南

2014/09/10 Javascript

JQuery.Ajax()的data参数类型实例详解

2015/11/20 Javascript

小心！AngularJS结合RequireJS做文件合并压缩的那些坑

2016/01/09 Javascript

使用jQuery监听DOM元素大小变化

2016/02/24 Javascript

jQuery 获取遍历获取table中每一个tr中的第一个td的方法

2016/10/05 Javascript

Node.js中看JavaScript的引用

2017/04/22 Javascript

关于angular js_$watch监控属性和对象详解

2017/04/24 Javascript

原生JS实现图片懒加载(lazyload)实例

2017/06/13 Javascript

Nodejs 复制文件/文件夹的方法

2017/08/24 NodeJs

JS中的JSON对象的定义和取值实现代码

2018/05/09 Javascript

详解使用create-react-app添加css modules、sasss和antd

2018/07/31 Javascript

elementUI vue this.$confirm 和el-dialog 弹出框移动示例demo

2019/07/03 Javascript

selenium 反爬虫之跳过淘宝滑块验证功能的实现代码

2020/08/27 Javascript

nodejs使用Sequelize框架操作数据库的实现

2020/10/21 NodeJs

深入学习Python中的上下文管理器与else块

2017/08/27 Python

详解python 拆包可迭代数据如tuple, list

2017/12/29 Python

Python多重继承的方法解析执行顺序实例分析

2018/05/26 Python

Python openpyxl 遍历所有sheet 查找特定字符串的方法

2018/12/10 Python

在python中画正态分布图像的实例

2019/07/08 Python

python 实现手机自动拨打电话的方法(通话压力测试)

2019/08/08 Python

基于pycharm实现批量修改变量名

2020/06/02 Python

keras中的History对象用法

2020/06/19 Python

HTML5的结构和语义(3):语义性的块级元素

2008/10/17 HTML / CSS

质检的岗位职责

2013/11/17 职场文书

求职简历自荐信

2014/06/18 职场文书

工作态度检讨书范文

2015/05/06 职场文书

OpenStack虚拟机快照和增量备份实现方法

2022/04/04 Servers

阿里云日志过滤器配置日志服务

2022/04/09 Servers