简单实现bootstrap选项卡效果


Posted in Javascript onFebruary 08, 2017

本文实例为大家分享了bootstrap选项卡的具体实现代码,供大家参考,具体内容如下

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
 <style>
  .tab1{
   border:1px solid #ddd;
   border-top:none;
   padding:30px;
   border-radius:0 0 5px 5px;/*把边框变为圆角:top-left、top-right、bottom-right、bottom-left*/
  }
 </style>
</head>
<body>
 <!--1.导航对应的所有内容要放到一个class为tab-content的div里;
  2.每一个内容块儿都要加上一个名为tab-pane的class,并且给对应的默认显示的内容添加一个active的class;
  3.给每一个导航的a标签添加一个data-toggle="tab"的自定义属性;
  4.给每一个选项内容添加一个id;
  5.给每一个导航的a标签添加一个锚点,即在#号后加上对应内容的id-->
 <div class="container">
  <div class="row">
   <ul class="nav nav-tabs">
    <li><a href="#con1" rel="external nofollow" data-toggle="tab">苹果</a></li>
    <li><a href="#con2" rel="external nofollow" data-toggle="tab">香蕉</a></li>
    <li><a href="#con3" rel="external nofollow" data-toggle="tab">橘子</a></li>
   </ul>
   <div class="tab-content"><!--选项卡的内容-->
    <div id="con1" class="tab-pane">html</div>
    <div id="con2" class="tab-pane">css</div>
    <div id="con3" class="tab-pane">javascript</div>
   </div>
  </div>
  <div class="row">
   <div class="col-lg-4"><!--让导航栏只占4个格子-->
    <ul class="nav nav-tabs">
     <li><a href="#con4" rel="external nofollow" data-toggle="tab">苹果</a></li>
     <li><a href="#con5" rel="external nofollow" data-toggle="tab">香蕉</a></li>
     <li><a href="#con6" rel="external nofollow" data-toggle="tab">橘子</a></li>
    </ul>
    <div class="tab-content tab1"><!--选项卡的内容-->
     <div id="con4" class="tab-pane">html</div>
     <div id="con5" class="tab-pane">css</div>
     <div id="con6" class="tab-pane">javascript</div>
    </div>
   </div>
  </div>
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图:

简单实现bootstrap选项卡效果

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

Javascript 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
Bootstrap导航条学习使用(一)
Feb 08 #Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 #Javascript
Javascript中的神器——Promise
Feb 08 #Javascript
jquery获取下拉框中的循环值
Feb 08 #Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 #Javascript
jQuery实现标签页效果实战(4)
Feb 08 #Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 #Javascript
You might like
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python利用Django如何写restful api接口详解
2018/06/08 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
小学生成长感言
2014/01/30 职场文书
安全生产目标责任书
2014/04/14 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
市场开发计划书
2014/05/07 职场文书
跑操口号
2014/06/12 职场文书
新手上路标语
2014/06/20 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
写给同事的离职感言
2015/08/04 职场文书
工程主管竞聘书
2015/09/15 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书