选项卡TAB
一、基础信息
关键class名:nav
写法:
(1)头部选中状态:class="active"
(2)头部按钮进行切换:<a>加data-toggle="tab"
(3)列表:<ul>加class="tab-content",<li>加class="tab-pane",如果<li>为选中状态的话class="active"
(4)列表切换:列表的<li>加id="a",头部tab加<a href="#a">
纵向显示:不能用class="nav-stacked",显示会有问题
基础HTML样式:
<ul class="nav nav-tabs"> <!-- 头部 -->
<li class="active"><a href="#a" data-toggle="tab">one</a></li>
<li><a href="#b" data-toggle="tab">two</a></li>
<li><a href="#c" data-toggle="tab">three</a></li>
</ul>
<ul class="tab-content"> <!-- 列表 -->
<li id="a" class="tab-pane active">aaaaaaaaaa</li>
<li id="b" class="tab-pane">bbbbbbbbbb</li>
<li id="c" class="tab-pane">cccccccccc</li>
</ul>
移动端:当分辨率小于768的时候样式会有变化
二、头部各种效果实现方法
1、TAB头部为设定宽度
默认宽度:和父元素一样宽
方法1:给TAB头部添加父级,给父级设定宽度
方法2:给TAB头部标签添加style
<ul class="nav nav-tabs" style="width:400px;">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
2、各个TAB标签宽度等分
默认:每个tab里的文字多宽,tab就多宽
写法:给ul列表加nav-justified属性
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
3、下面的线自适应TAB选项的宽度
方法:class="nav-tabs-justified"
<ul class="nav nav-tabs nav-tabs-justified">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
4、没有下划线样式的TAB
方法:class="nav-pills"
<ul class="nav nav-pills">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
(1)设定宽度:设定宽度不能只加style="width:400px;",还需要设置端点对其,class="nav-justified"
<ul class="nav nav-pills nav-justified" style="width:400px;"><!-- 设定宽度 -->
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
(2)纵向显示
写法:class="nav-stacked"
<ul class="nav nav-pills nav-stacked" style="width:400px;">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
5、给TAB加下拉菜单
方法:
(1)给需要加下拉菜单的<li>加class="dropdown"
(2)下拉菜单的箭头:在tab文字的后面加<span class="caret"></span>
(3)下拉菜单:给<a>加class="dropdown-toggle"、给下拉的<ul>加class="dropdown-menu"
(4)实现js的交互:给<a>加data-toggle="dropdown"
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">three <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">child1</a></li>
<li><a href="#">child2</a></li>
</ul>
</li>
三、列表的样式
1、给tab和列表设定宽度
方法:给父级设定宽度
<div style="width:400px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#a1" data-toggle="tab">one</a></li>
<li><a href="#b1" data-toggle="tab">two</a></li>
<li><a href="#c1" data-toggle="tab">three</a></li>
</ul>
<ul class="tab-content">
<li id="a1" class="tab-pane active">aaaaaaaaaa</li>
<li id="b1" class="tab-pane">bbbbbbbbbb</li>
<li id="c1" class="tab-pane">cccccccccc</li>
</ul>
</div>
2、给列表设定样式
(1)给列表加圆角:四个值分别为第一个……第四个的圆角值
.tab-content{ border-radius:0 0 5px 5px;}
3、切换方式
(1)淡入淡出
方法:
①给列表的<i>加 class="fade"为淡入淡出的切换方式
②给列表的<i>加 class="in"为一开始是显示状态
<ul class="tab-content">
<li id="a2" class="tab-pane fade in active">aaaaaaaaaa</li>
<li id="b2" class="tab-pane fade">bbbbbbbbbb</li>
<li id="c2" class="tab-pane fade">cccccccccc</li>
</ul>
(2)对PC端进行鼠标移入移出的设置
写法:利用js。给tab的<ul>加一个id。然后再写js方法,当鼠标移入的时候显示
<div style="width:400px;">
<ul id="myTabs" class="nav nav-tabs">
<li class="active"><a href="#a3" data-toggle="tab">one</a></li>
<li><a href="#b3" data-toggle="tab">two</a></li>
<li><a href="#c3" data-toggle="tab">three</a></li>
</ul>
<ul class="tab-content">
<li id="a3" class="tab-pane active">aaaaaaaaaa</li>
<li id="b3" class="tab-pane">bbbbbbbbbb</li>
<li id="c3" class="tab-pane">cccccccccc</li>
</ul>
</div>
$('#myTabs a').mouseover(function(){
$(this).tab('show');
});
(3)下拉菜单的切换
<div style="width:400px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#a4" data-toggle="tab">one</a></li>
<li><a href="#b4" data-toggle="tab">two</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">three <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#c4" data-toggle="tab">child1</a></li>
<li><a href="#d4" data-toggle="tab">child2</a></li>
</ul>
</li>
</ul>
<ul class="tab-content">
<li id="a4" class="tab-pane active">aaaaaaaaaa</li>
<li id="b4" class="tab-pane">bbbbbbbbbb</li>
<li id="c4" class="tab-pane">cccccccccc</li>
<li id="d4" class="tab-pane">dddddddddd</li>
</ul>
</div>
选项卡TAB的更多相关文章
- 选项卡 tab切换
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容
作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...
- jQuery的DOM操作实例(1)——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- jq的选项卡tab
jq中选项卡很简单,的注意是他结构命名(网上有很多,其中不乏不规范) 1.tab 2.tab-hd (选项栏) 3.tab-bd(选项栏对应的内容) css代码(布局没问题,可以只看jquery代码) ...
- jQuery插件学习之选项卡Tab
在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...
- Mui 选项卡 tab 高度 没有自适应....
因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是 用一个值 保存 当前 的 高度... 当 点击其他 t ...
- EasyUI选项卡tab页面处理示例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 实用的Jquery选项卡TAB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- layui的选项卡(tab)的问题
当页面打开单个tab时,操作栏显示: 当页面打开多个tab时,会发现操作栏与下面第一个tab显示的操作栏类型一样,并且操作栏的按钮无作用 第一个标签操作栏显示: 产生这样的原因:使用layui时,每个 ...
随机推荐
- 你真的会用go语言写单例模式吗?
最近在学习Golang,想着可以就以前的知识做一些串通,加上了解到go语言也是面向对象编程语言之后.在最近的开发过程中,我碰到一个问题,要用go语言实现单例模式.本着“天下知识,同根同源”(我瞎掰的~ ...
- legend3---lavarel常用操作代码2
legend3---lavarel常用操作代码2 一.总结 一句话总结: 对于王思cong被执法人的感悟:失意时 莫心伤,得意时 莫膨胀 1.lavarel自动事务? DB::transaction方 ...
- Android 自定义AlertDialog退出对话框
Android 自定义AlertDialog退出对话框 转 https://blog.csdn.net/wkh11/article/details/53081634在项目中很多时候会出现点击返回键出现 ...
- Swift 条件语句
条件语句通过设定的一个或多个条件来执行程序,在条件为真时执行指定的语句,在条件为 false 时执行另外指定的语句. 可以通过下图来简单了解条件语句的执行过程: Swift 提供了以下几种类型的条件语 ...
- python实现并发服务器实现方式(多线程/多进程/select/epoll)
python实现并发服务器实现方式(多线程/多进程/select/epoll) 并发服务器开发 并发服务器开发,使得一个服务器可以近乎同一时刻为多个客户端提供服务.实现并发的方式有多种,下面以多进 ...
- Build Telemetry for Distributed Services之Open Telemetry简介
官网链接:https://opentelemetry.io/about/ OpenTelemetry is the next major version of the OpenTracing and ...
- pip安装软件报错 utf-8 code can't decode byte 0xcf in position7
pip安装软件报错 utf-8 code can't decode byte 0xcf in position7 根据错误提示的路径找到__init__.py文件 根据错误提示的最后几句话找到对应的行 ...
- ubuntu 18.04安装ftp服务器
首先安装vsftpd: sudo apt-get install vsftpd 可以通过命令vsftpd -version查看vsftpd版本. 为ftp服务器新建一个用户(比如我这里新建一个用户名和 ...
- MLN Alchemy
1. 前言: 本文主要参考Alchemy Tutorial, washington主页上挂出的所有Alchemy项目(包括Alchemy1.0, Alchemy2.0, AlchemyLite)都无法 ...
- jeesite框架前端 tabPage页签刷新功能。
js主动刷新当前页签的js代码 原本想找一下jeesite有没有主动刷新当前页面的内置方法. 官方文档找了一大堆,找都找不到,也可能我这个需求比较少人需要. tab标签页有一个右键刷新页签功能 查看编 ...