思路：

① 遍历Tab选项
② 然后给每个Tab选项绑定点击事件
③ 每次点击时清除所有Tab选项及Tab选项内容的样式，然后给当前Tab选项添加标记样式，给当前Tab选项添加显示样式

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>

        #tab{ 
　　　　　　width: 300px; 
　　　　　　margin: 30px auto;
　　　　　}

        .tab-nav{ 
　　　　　　display: flex;
　　　　　}

        .tab-nav a{

            flex: 1;

            line-height: 40px;

            border: 1px solid #000;

            text-align: center;

            text-decoration: none;

            color: #000;}

        .tab-nav a.current{

            color: #fff;

            background: #000;

        }

        .content{

            display: none;

            width: 100%;

            height: 300px;

            color: black;

            box-sizing: border-box;

            padding: 10px;}

        .content.current{

            display: block;

        }

        /*.content1{ background: #6fcaff; }*/

        /*.content2{ background: #ffb3e6;}*/

        /*.content3{ background: #e0bd7f;}*/

    </style>

</head>

<body>

<div id="tab">

    <!--Tab选项-->

    <div class="tab-nav">

        <a href="javascript:;" class="current">选项1</a>

        <a href="javascript:;">选项2</a>

        <a href="javascript:;">选项3</a>

    </div>

    <!--Tab选项内容-->

    <div class="tab-content">

        <div class="content content1 current">选项内容1111</div>

        <div class="content content2">选项内容2222</div>

        <div class="content content3">选项内容3333</div>

    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<script>
　　// js原生

    var tabTotal = document.getElementById('tab');

    var tabNav = tabTotal.querySelectorAll('.tab-nav a');

    var tabContent = tabTotal.querySelectorAll('.tab-content .content');

    for(var i = 0; i < tabNav.length; i++){   // 遍历Tab选项

        tabNav[i].onclick = (function (i) {   // Tab选项绑定点击事件

            return function () {

                // 清除所有Tab选项的标记样式

                for(var j = 0; j < tabNav.length; j++){

                    tabNav[j].classList.remove('current');

                }
　　　　　　　　　// 给当前选中的tab选项增加样式

                tabNav[i].classList.add('current');

                // 清除所有Tab选项内容的显示样式

                for(j = 0; j < tabContent.length; j++){

                    tabContent[j].classList.remove('current');

                }

                tabContent[i].classList.add('current');

            }

        })(i);

    }
　　// jQuery 
    $(".tab-nav a").each(function (index) {
        $(this).click(function () {
            $(this).css({'background':'black','color':'white'}).siblings().css({'background':'white','color':'black'});
            $(".content").eq(index).css("display","block").siblings().css("display","none");
        })
    })
</script> 
</body>
</html>

tab选项卡切换(js原生、jQuery )的更多相关文章

  1. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  2. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  3. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  4. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  5. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  6. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  7. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  8. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  9. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

随机推荐

  1. Python-通过configparser读写配置文件

    Python读写配置文件: 1.创建配置文件(文件名以.conf或.ini结束的文件表示配置文件) 2.导入所需模块 OS, configparser >>> import os & ...

  2. C++调用Matlab函数求特征值

    最近需要用到C++和Matlab的混编,记录一下学习过程~ 要实现的是调用Matlab函数,求矩阵前k个最小的特征值及其特征向量. //C++ #include "engine.h" ...

  3. 【转载】关于DBUtils中QueryRunner的一些解读

    前面已经有文章说了DBUtils的一些特性, 这里再来详细说下QueryRunner的一些内部实现, 写的有错误的地方还恳请大家指出. QueryRunner类 QueryRunner中提供对sql语 ...

  4. sqlserver 和MySQL的一些函数的区别

    相同的表数据在sqlserver和MySQL中使用各自的函数得到相同的结果,如下表 drop table tb;create table tb(id int, value1 varchar(10), ...

  5. [bzoj3291] Alice与能源计划 (二分图最大匹配)

    传送门 Description 在梦境中,Alice来到了火星.不知为何,转眼间Alice被任命为火星能源部长,并立刻面临着一个严峻的考验.为 了方便,我们可以将火星抽象成平面,并建立平面直角坐标系. ...

  6. Keil

    Keil C51 V9.00 即09年发布的最新版本uVision 4,版本外观改变比较大,可以使用以前的注册文件.如果全新安装,在VISTA或者WIN 7系统下,请使用管理员方式运行,然后注册即可无 ...

  7. 浅谈 Mysql

    数据库一些基本的概念 Mysql 基础操作 Mysql 数据类型 Mysql 表的完整性约束 Mysql 表的操作 Mysql 数据增删改查语句 Mysql 多表查询 Mysql 索引原理及分类 My ...

  8. 【hihocoder 1474】拆字游戏

    [题目链接]:http://hihocoder.com/problemset/problem/1474 [题意] [题解] 题目的意思是说,那个块在最左端先出现,就先处理那个块; 每个连通块,处理出最 ...

  9. foj 2139

    hi.baidu.com/ydlqw/item/120cd21a5afd5becddeeca41?qq-pf-to=pcqq.c2c

  10. 转载 - 最短路&差分约束题集

    出处:http://blog.csdn.net/shahdza/article/details/7779273 最短路 [HDU] 1548    A strange lift基础最短路(或bfs)★ ...