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

juqery 学习之六 CSS--css、位置、宽高

Feb 11 Javascript

仿中关村在线首页弹出式广告插件(jQuery版)

May 03 Javascript

jQuery针对各类元素操作基础教程

Aug 29 Javascript

node.js中的querystring.unescape方法使用说明

Dec 10 Javascript

JS+CSS实现仿雅虎另类滑动门切换效果

Oct 13 Javascript

JavaScript对象参数的引用传递

Jan 14 Javascript

jQuery事件绑定用法详解(附bind和live的区别)

Jan 19 Javascript

js鼠标按键事件和键盘按键事件用法实例汇总

Oct 03 Javascript

Javascript中Promise的四种常用方法总结

Jul 14 Javascript

node.js中axios使用心得总结

Nov 29 Javascript

vue.extend与vue.component的区别和联系

Sep 19 Javascript

js实现点赞按钮功能的实例代码

Mar 06 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

基于mysql的bbs设计（二）

2006/10/09 PHP

PHP MVC模式在网站架构中的实现分析

2010/03/04 PHP

php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)

2013/09/23 PHP

PHP中异常处理的一些方法整理

2015/07/03 PHP

php中简单的对称加密算法实现

2017/01/05 PHP

jQuery如何取id有.的值一般的方法是取不到的

2014/04/18 Javascript

js获取浏览器基本信息大全

2014/11/27 Javascript

Javascript中Array用法实例分析

2015/06/13 Javascript

最丑的时钟效果！js canvas时钟制作方法

2016/08/15 Javascript

BootStrap 实现各种样式的进度条效果

2016/12/07 Javascript

Bootstrap jquery.twbsPagination.js动态页码分页实例代码

2017/02/20 Javascript

JS查找数组中重复元素的方法详解

2017/06/14 Javascript

使用vue构建一个上传图片表单

2017/07/04 Javascript

认识jQuery的Promise的具体使用方法

2017/10/10 jQuery

微信小程序的生命周期的详解

2017/10/19 Javascript

node.js的exports、module.exports与ES6的export、export default深入详解

2017/10/26 Javascript

Javascript获取某个月的天数

2018/05/30 Javascript

基于Vue实现图片在指定区域内移动的思路详解

2018/11/11 Javascript

Vue解析带html标签的字符串为dom的实例

2019/11/13 Javascript

js实现九宫格布局效果

2020/05/28 Javascript

vue表单验证之禁止input输入框输入空格

2020/12/03 Vue.js

[05:08]DOTA2-DPC中国联赛3月6日Recap集锦

2021/03/11 DOTA

python操作MySQL数据库的方法分享

2012/05/29 Python

简单的抓取淘宝图片的Python爬虫

2014/12/25 Python

Python中处理字符串的相关的len()方法的使用简介

2015/05/19 Python

python+tifffile之tiff文件读写方式

2020/01/13 Python

python 利用toapi库自动生成api

2020/10/19 Python

HTML5新增的表单元素和属性实例解析

2014/07/07 HTML / CSS

Omio波兰：全欧洲低价大巴、火车和航班搜索和比价

2018/02/16 全球购物

MaBelle玛贝尔香港官网：香港钻饰连锁店

2019/09/09 全球购物

医药学专业大学生职业生涯规划书论文

2014/01/21 职场文书

2014年团员学习十八大思想汇报

2014/09/13 职场文书

2015国庆66周年宣传语

2015/07/14 职场文书

MySQL获取所有分类的前N条记录

2021/05/07 MySQL

分析JVM源码之Thread.interrupt系统级别线程打断

2021/06/29 Java/Android

css3中2D转换之有趣的transform形变效果

2022/02/24 HTML / CSS