Bootstrap实现的标签页内容切换显示效果示例

更新时间：2017年05月25日 10:50:13 作者：骑小猪追火车

这篇文章主要介绍了Bootstrap实现的标签页内容切换显示效果,结合完整实例形式分析了基于Bootstrap实现的标签页内容切换显示功能相关操作技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了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>

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线bootstrap可视化布局编辑工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。

您可能感兴趣的文章:

详解如何让InstantClick兼容MathJax、百度统计等
本篇文章主要介绍了如何让InstantClick兼容MathJax、百度统计等，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
JavaScript中函数的四种调用方式总结
这篇文章主要为大家详细介绍了JavaScript中函数的四种调用方式,文中的示例代码讲解详细,对我们深入掌握JavaScript有一定的帮助,需要的可以参考下
2023-10-10
jQuery实现动态文字搜索功能
本文主要介绍了jQuery实现动态文字搜索功能的分析过程，文章底部提供了完整的代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
微信小程序button组件使用详解
这篇文章主要为大家详细介绍了微信小程序button组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树
这篇文章主要介绍了JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树,需要引入dhtmlXTreeObject的css和js文件,这里还需要注意js的引用顺序,本文给大家介绍的非常详细,需要的的朋友参考下吧
2023-11-11
Webwork 实现文件上传下载代码详解
WebWork 当然也提供了很友好的拦截器来实现对文件的上传，让我们可以专注与业务逻辑的设计和实现，在实现上传和下载时顺便关注了下框架上传下载的实现
2016-02-02
javascript模拟php函数in_array
就是判断一个元素是否存在于数组中的函数，既然js里string都有indexOf函数，为什么不在Array对象里设置一个这样的函数呢，其实就用indexOf这个思想挺好的，不知道制定JS标准的人是基于什么考虑，把这样一个如此常用的功能没考虑在内的。
2015-04-04
Javascript实现检测客户端类型代码封包
在以前，总是以为使用用户代理字符串检测浏览器是那种类型就行了，这样确实大错特错啊，下面就来说说如何通过js判断出当前浏览者使用的的设备类型呢
2015-12-12
关于webpack代码拆分的解析
本篇文章主要介绍了关于webpack代码拆分的解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
bootstrap select2插件用ajax来获取和显示数据的实例
今天小编就为大家分享一篇bootstrap select2插件用ajax来获取和显示数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08