简单实现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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
vue实现word,pdf文件的导出功能
Jul 31 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
用JS创建一个录屏功能
Nov 11 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
Zend的MVC机制使用分析(一)
2013/05/02 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python多重继承新算法C3介绍
2014/09/28 Python
Python中的ceil()方法使用教程
2015/05/14 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
Python虚拟环境项目实例
2017/11/20 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python实现计算器简易版
2020/12/17 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
英语教学随笔感言
2014/02/20 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书