简单实现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 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 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 更新数据库中断的解决方法
2009/06/05 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python多线程操作实例
2014/11/21 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python打开windows应用程序的实例
2019/06/28 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
教师节商场活动方案
2014/02/13 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
医德医风自我评价
2014/09/19 职场文书
公司周年庆典标语
2014/10/07 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
创业计划书之书店
2019/09/10 职场文书