选项卡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时,每个 ...
随机推荐
- Leetcode题目287.寻找重复数(中等)
题目描述: 给定一个包含 n + 1 个整数的数组 nums,其数字都在 1 到 n 之间(包括 1 和 n),可知至少存在一个重复的整数.假设只有一个重复的整数,找出这个重复的数. 示例 1: 输入 ...
- 批量停止、删除docker容器
批量停止 根据NAMES停止所有容器 docker stop `docker ps | awk 'NR!=1{print $NF}'` 根据CONTAINER ID停止所有容器 docker stop ...
- Build Telemetry for Distributed Services之OpenTracing指导:C#
官网链接:https://opentracing.io/guides/ 官方微博:https://medium.com/opentracing Welcome to the OpenTracing G ...
- JavaFX入门:简单Demo-学习NetBeans开发平台
零. 最终目标 通过两种方式(纯代码控制.FXML),实现一个简单的登录界面: Paste_Image.png 涉及到的控件: 文本(Text,动态显示内容).标签(Label,显示文本).文本域 ...
- PAT 甲级 1027 Colors in Mars (20 分)(简单,进制转换)
1027 Colors in Mars (20 分) People in Mars represent the colors in their computers in a similar way ...
- Shell中特殊字符的含义
$0 这个程式的执行名字 $n 这个程式的第n个参数值,n=1..9 $* 这个程式的所有参数,此选项参数可超过9个. $# 这个程式的参数个数 $$ 这个程式的PID(脚本运行的当前进程ID号) $ ...
- Windows安装zabbix-agent4.0
1.在Windows系统中的C盘,新建一个zabbix目录C:/zabbix2.先下载zabbix-agent的安装包https://assets.zabbix.com/downloads/4.0.1 ...
- 最新 携程java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.携程等10家互联网公司的校招Offer,因为某些自身原因最终选择了携程.6.7月主要是做系统复习.项目复盘.LeetCode ...
- 阻止移动端input按钮聚焦时唤起软键盘的方法
一.设置input为readonly 二.使用JS代码,在input按钮fous时就让其blur
- MongoDB之源生基础概念与语句测试
此文章,我们拿MySQL和MongoDB做一个简单的理解. MySQL的数据库 => MongoDB数据库 MySQL的表 => MongoDB的Collection MySQL的一行记录 ...