一、基础信息

关键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的更多相关文章

  1. 选项卡 tab切换

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容

    作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...

  3. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  4. jq的选项卡tab

    jq中选项卡很简单,的注意是他结构命名(网上有很多,其中不乏不规范) 1.tab 2.tab-hd (选项栏) 3.tab-bd(选项栏对应的内容) css代码(布局没问题,可以只看jquery代码) ...

  5. jQuery插件学习之选项卡Tab

    在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...

  6. Mui 选项卡 tab 高度 没有自适应....

    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...

  7. EasyUI选项卡tab页面处理示例

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. 实用的Jquery选项卡TAB

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. layui的选项卡(tab)的问题

    当页面打开单个tab时,操作栏显示: 当页面打开多个tab时,会发现操作栏与下面第一个tab显示的操作栏类型一样,并且操作栏的按钮无作用 第一个标签操作栏显示: 产生这样的原因:使用layui时,每个 ...

随机推荐

  1. Leetcode题目287.寻找重复数(中等)

    题目描述: 给定一个包含 n + 1 个整数的数组 nums,其数字都在 1 到 n 之间(包括 1 和 n),可知至少存在一个重复的整数.假设只有一个重复的整数,找出这个重复的数. 示例 1: 输入 ...

  2. 批量停止、删除docker容器

    批量停止 根据NAMES停止所有容器 docker stop `docker ps | awk 'NR!=1{print $NF}'` 根据CONTAINER ID停止所有容器 docker stop ...

  3. Build Telemetry for Distributed Services之OpenTracing指导:C#

    官网链接:https://opentracing.io/guides/ 官方微博:https://medium.com/opentracing Welcome to the OpenTracing G ...

  4. JavaFX入门:简单Demo-学习NetBeans开发平台

    零. 最终目标 通过两种方式(纯代码控制.FXML),实现一个简单的登录界面:   Paste_Image.png 涉及到的控件: 文本(Text,动态显示内容).标签(Label,显示文本).文本域 ...

  5. PAT 甲级 1027 Colors in Mars (20 分)(简单,进制转换)

    1027 Colors in Mars (20 分)   People in Mars represent the colors in their computers in a similar way ...

  6. Shell中特殊字符的含义

    $0 这个程式的执行名字 $n 这个程式的第n个参数值,n=1..9 $* 这个程式的所有参数,此选项参数可超过9个. $# 这个程式的参数个数 $$ 这个程式的PID(脚本运行的当前进程ID号) $ ...

  7. Windows安装zabbix-agent4.0

    1.在Windows系统中的C盘,新建一个zabbix目录C:/zabbix2.先下载zabbix-agent的安装包https://assets.zabbix.com/downloads/4.0.1 ...

  8. 最新 携程java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.携程等10家互联网公司的校招Offer,因为某些自身原因最终选择了携程.6.7月主要是做系统复习.项目复盘.LeetCode ...

  9. 阻止移动端input按钮聚焦时唤起软键盘的方法

    一.设置input为readonly 二.使用JS代码,在input按钮fous时就让其blur

  10. MongoDB之源生基础概念与语句测试

    此文章,我们拿MySQL和MongoDB做一个简单的理解. MySQL的数据库 => MongoDB数据库 MySQL的表 => MongoDB的Collection MySQL的一行记录 ...