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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
基本DOM节点操作
Jan 17 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
原生JavaScript实现进度条
Feb 19 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python 占位符的使用方法详解
2019/07/10 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Python with语句用法原理详解
2020/07/03 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
2015年教师节新闻稿
2015/07/17 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Python中Selenium对Cookie的操作方法
2021/07/09 Python
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android