Bootstrap基本插件学习笔记之标签切换(17)


Posted in Javascript onDecember 08, 2016

Bootstrap可以很轻松就实现标签切换的效果。

0x01 样式1

基本样式:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>标签切换</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>标签切换</h1>
 </div>
 <div>
  <ul class="nav nav-tabs">
   <li class="active"><a href="#Home" data-toggle="tab">首 页</a></li>
   <li><a href="#New" data-toggle="tab">新 闻</a></li>
   <li><a href="#About" data-toggle="tab">关 于</a></li>
  </ul>
  <!--标签页内容-->
  <div class="tab-content">
   <div class="tab-pane active in fade" id="Home">
    <div class="page-header">
     <h1>首页</h1>
    </div>
    <p>我是首页我是首页我是首页我是首页我是首页我是首页</p>
   </div>
   <div class="tab-pane fade" id="New">
    <div class="page-header">
     <h1>新闻</h1>
    </div>
    <p>我是新闻我是新闻我是新闻我是新闻我是新闻我是新闻</p>
   </div>
   <div class="tab-pane fade" id="About">
    <div class="page-header">
     <h1>关于</h1>
    </div>
    <p>我是关于我是关于我是关于我是关于我是关于我是关于</p>
   </div>
  </div>
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本插件学习笔记之标签切换(17)

添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式。

0x02 样式2

下面是带有下拉菜单的标签切换样式:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>标签切换</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>标签切换</h1>
 </div>
 <div>
  <ul class="nav nav-tabs">
   <li class="active"><a href="#Home" data-toggle="tab">首 页</a></li>
   <li class="dropdown" data-toggle="tab">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     新 闻
     <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#Tiyu" data-toggle="tab">体育新闻</a></li>
     <li><a href="#Yule" data-toggle="tab">娱乐新闻</a></li>
    </ul>
   </li>
   <li> <a href="#About" data-toggle="tab">关 于</a></li>
  </ul>
  <div class="tab-content">
   <div class="tab-pane fade in active" id="Home">
    <div class="page-header">
     <h3>网站首页</h3>
    </div>
    <p>网站首页网站首页网站首页网站首页网站首页网站首页网站首页网站首页</p>
   </div>
   <div class="tab-pane fade" id="About">
    <div class="page-header">
     <h3>关于</h3>
    </div>
    <p>关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于</p>
   </div>
   <div class="tab-pane fade" id="Tiyu">
    <div class="page-header">
     <h3>体育</h3>
    </div>
    <p>体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育</p>
   </div>
   <div class="tab-pane fade" id="Yule">
    <div class="page-header">
     <h3>娱乐</h3>
    </div>
    <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
   </div>
  </div>
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本插件学习笔记之标签切换(17)

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 #Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 #Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 #Javascript
浅谈Node.js:理解stream
Dec 08 #Javascript
You might like
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python使用MONGODB入门实例
2015/05/11 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python WEB应用部署的实现方法
2019/01/02 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
后勤园长自我鉴定
2013/10/17 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS