简单实现Bootstrap标签页


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了Bootstrap标签页的具体实现代码,供大家参考,具体内容如下

HTML代码:

<div id="tabs"> 
 <ul class="nav nav-tabs"> 
 <li class="active"><a href="#item1" data-toggle="tab">项目一</a></li> 
 <li><a href="#item2" data-toggle="tab">项目二</a></li> 
 <li><a href="#item3" data-toggle="tab">项目三</a></li> 
 </ul> 
 <div class="tab-content"> 
 <div class="tab-pane fade in active" id="item1"> 
  <table border="1"> 
  <tr><td>购买材料1</td><td>购买材料2</td><td>购买材料3</td><td>购买材料4</td></tr> 
  <tr><td>购买材料5</td><td>购买材料6</td><td>购买材料7</td><td>购买材料8</td></tr> 
  <tr><td>购买材料9</td><td>购买材料10</td><td>购买材料11</td><td>购买材料12</td></tr> 
  <tr><td>购买材料13</td><td>购买材料14</td><td>购买材料15</td><td>购买材料16</td></tr> 
  </table> 
 </div> 
 <div class="tab-pane fade" id="item2"> 
  <table border="1"> 
  <tr><td>购买材料1</td><td>购买材料2</td><td>购买材料3</td><td>购买材料4</td></tr> 
  <tr><td>购买材料5</td><td>购买材料6</td><td>购买材料7</td><td>购买材料8</td></tr> 
  <tr><td>购买材料9</td><td>购买材料10</td><td>购买材料11</td><td>购买材料12</td></tr> 
  <tr><td>购买材料13</td><td>购买材料14</td><td>购买材料15</td><td>购买材料16</td></tr> 
  </table> 
 </div> 
 <div class="tab-pane fade" id="item3"> 
  <table border="1"> 
  <tr><td>购买材料1</td><td>购买材料2</td><td>购买材料3</td><td>购买材料4</td></tr> 
  <tr><td>购买材料5</td><td>购买材料6</td><td>购买材料7</td><td>购买材料8</td></tr> 
  <tr><td>购买材料9</td><td>购买材料10</td><td>购买材料11</td><td>购买材料12</td></tr> 
  <tr><td>购买材料13</td><td>购买材料14</td><td>购买材料15</td><td>购买材料16</td></tr> 
  </table> 
 </div> 
 </div> 
</div>

CSS代码:

#tabs{ 
 width:550px; 
 height:210px; 
 background:white; 
} 
#item1,#item2,#item3{ 
 width:500px; 
 height:120px; 
 margin-left:20px; 
} 
#tabs table{ 
 border-collapse:collapse; 
 margin-top:20px; 
} 
#tabs td{ 
 text-align:center; 
 width:126px; 
 height:30px; 
} 
#tabs ul li{ 
 margin-right:10px; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
获取JavaScript异步函数的返回值
Dec 21 #Javascript
bootstrap实现图片自动轮播
Dec 21 #Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 #Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 #Javascript
详解Vue.js动态绑定class
Dec 20 #Javascript
浅谈Angular的$q, defer, promise
Dec 20 #Javascript
BootStrapTable服务器分页实例解析
Dec 20 #Javascript
You might like
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php实现学生管理系统
2020/03/21 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
js对象关系图 方便dom操作
2012/03/18 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python如何实现一个刷网页小程序
2018/11/27 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
临床护士自荐信
2014/01/31 职场文书
商业用房租赁协议书
2014/10/13 职场文书
体育委员竞选稿
2015/11/21 职场文书