bootstrap选项卡使用方法解析
作者:小鱼儿_zhang 发布时间:2024-04-16 09:13:11
选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项,能切换出对应的内容
Bootstrap框架中的选项卡主要有两部分内容组成:
选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs)
底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示.
<!-- 选项卡组件(菜单项nav-tabs)-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane active" id="bulletin">公告内容面板</div>
<div class="tab-pane" id="rule">规则内容面板</div>
<div class="tab-pane" id="forum">论坛内容面板</div>
<div class="tab-pane" id="security">安全内容面板</div>
<div class="tab-pane" id="welfare">公益内容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
选项卡–选项卡的结构
一个选项卡主要包括两个部分,其一是菜单项,其二是内容面板。
关键一点,选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。
对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的:
css源码:
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
选项卡–触发切换效果
选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求:
1、选项卡导航链接中要设置 data-toggle=”tab”
2、并且设置 data-target=”对应内容面板的选择符(一般是ID)”;
如果是链接的话,还可以通过 href=”对应内容面板的选择符(一般是ID)”
主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。
3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配。
选项卡–为选择卡添加fade样式
为了让面板的隐藏与显示在切换的过程效果更流畅,可以在面板中添加类名 fade,让其产生渐入的效果。
在添加 fade 样式时,最初的默认显示的内容面板一定要记得加上 in 类名,不然其内容用户无法看到
<!-- 选项卡组件(菜单项nav-tabs)-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
<div class="tab-pane fade" id="rule">规则内容面板</div>
<div class="tab-pane fade" id="forum">论坛内容面板</div>
<div class="tab-pane fade" id="security">安全内容面板</div>
<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
选项卡–胶囊式选项卡(nav-pills)
在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外,还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle=”tab”换成data-toggle=”pill”。
<!-- 选项卡组件(菜单项nav-pills)-->
<ul id="myTab" class="nav nav-pills" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="pill">规则</a></li>
<li><a href="#forum" role="tab" data-toggle="pill">论坛</a></li>
<li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
<div class="tab-pane fade" id="rule">规则内容面板</div>
<div class="tab-pane fade" id="forum">论坛内容面板</div>
<div class="tab-pane fade" id="security">安全内容面板</div>
<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
选项卡–JavaScript触发方法
在每个链接的单击事件中调用tab(“show”)方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的 data-toggle=”tab” 或 data-toggle=”pill” 的属性,然后通过下面的脚本来调用:
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
实例 :
<!-- 选项卡组件(菜单项nav-tabs)-->
<ul id="myTab2" class="nav nav-tabs" role="tablist">
<li><a href="#a" role="tab">娱乐</a></li>
<li><a href="#b" role="tab">房产</a></li>
<li><a href="#c" role="tab">国内</a></li>
<li><a href="#d" role="tab">国外</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade in active" id="a">娱乐内容面板</div>
<div class="tab-pane fade" id="b">房产内容面板</div>
<div class="tab-pane fade" id="c">国内内容面板</div>
<div class="tab-pane fade" id="d">国外内容面板</div>
</div>
<script>
$(function(){
$("#myTab2 a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
</script>
下文点击查看
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap Table使用教程
Bootstrap插件使用教程
猜你喜欢
- 一、DataFrame数据准备增、删、改、查的方法有很多很多种,这里只展示出常用的几种。参数inplace默认为False,只能在生成的新数
- ActiveServerPages,ASP0126(0x80004005)-->找不到包含文件MicrosoftOLEDBProvid
- 操作Excel通常是用如下三个扩展体:import xlrdimport xlwtimport openpyxlwb1 = openpyxl
- 什么是 conda ?conda 是开源包(packages)和虚拟环境(environment)的管理系统。**packages 管理:*
- 写完这个项目后,导师说这个你完全可以当作毕业项目使用了,写的很全,很多的都设计考虑周全,但我的脚步绝不止于现在,我想要的是星辰大海!与君共勉
- 本文实例讲述了Python多线程编程之多线程加锁操作。分享给大家供大家参考,具体如下:Python语言本身是支持多线程的,不像PHP语言。下
- JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于ECMAScript的一个子集。 JSON
- 本文为大家分享了MySQL 8.0.29 安装配置方法图文教程,供大家参考,具体内容如下一、安装包下载1、下载地址安装包,按下图所示操作下载
- 如何用SysOjects来获知数据库的信息?SysObjects中就保存了数据库中所有对象的信息,如:SELECT * FROM SysOb
- API:statuses/public_timeline 返回最新的200条公共微博,返回结果非完全实时CODE:#!/usr/
- 一、前言图像拼接技术就是将数张有重叠部分的图像(可能是不同时间、不同视角或者不同传感器获得的)拼成一幅无缝的全景图或高分辨率图像的技术。二、
- 一、binlog 介绍服务器的二进制日志记录着该数据库的所有增删改的操作日志(前提是要在自己的服务器上开启binlog),还包括
- 导读只需要添加几行代码,就可以得到更快速,更省显存的PyTorch模型。你知道吗,在1986年Geoffrey Hinton就在Nature
- 现在我们已经知道了,fixtures是一个非常强大的功能。那么有的时候,我们可能会写一个fixture,而这个fixture所有的测试函数都
- 例:MYSQL安装在 D:\ApacheServer\mysql 下开始==>运行==>cmd,或者 按住win键+r键输入cm
- 原文:Five quick JavaScript tips真是五个很quick的小提示:1.只在<form>元素上使用submi
- 先下载:http://signup.qq.com/js/a.js用 IntelliJ IDEA 格式化代码:var naa = true;O
- 本文为大家分享了mysql 8.0.12的 安装教程,供大家参考,具体内容如下安装教程环境:系统:Windows8.1安装包:mysql-8
- 我的电脑环境是使用.net framework4.5.1,如果在调试过程中调不通请注意我用的是Visual studion 2017,pyt
- sign签名是用于提供给外部(第三方)调用的接口,调用方需要提供正确的appkey钥匙才能调用,确保了接口的安全性。签名参数sign生成方法