简单实现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的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 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
ThinkPHP应用模式扩展详解
2014/07/16 PHP
php实现的RSS生成类实例
2015/04/23 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
接收键盘指令的脚本
2006/06/26 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python中stdout输出不缓存的设置方法
2014/05/29 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Pytorch之parameters的使用
2019/12/31 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
python 下载文件的几种方法汇总
2021/01/06 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
《花木兰》教学反思
2014/04/09 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书