简单实现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中变量提升 Hoisting
Jul 03 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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使用百度天气接口示例
2014/04/22 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
JavaScript面象对象设计
2008/04/28 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python语言的优势是什么
2020/06/17 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
4s店机修工岗位职责
2013/12/20 职场文书
工作失职检讨书范文
2014/01/16 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
golang的文件创建及读写操作
2022/04/14 Golang