思路：

① 遍历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. Spring+SprinMVC配置学习总结

    一千个人有一千种spring的配置方式,真是这样.看了好多的配置,试验了很多.这里做一个总结. 1 原理上,spring和springmvc可以合并为一个配置文件然后在web.xml中加载,因为最终的 ...

  2. Uoj #218. 【UNR #1】火车管理 可持久化线段树+思维

    Code: #include<bits/stdc++.h> #define maxn 500005 using namespace std; int n,Q,ty,lastans=0; i ...

  3. Microsoft Visual Studio 常用快捷键总结

    table tr:nth-child(odd){ background: #FFFFCC; } table tr:nth-child(even){ background: #FFFF99; } Mic ...

  4. 【剑指Offer】64、滑动窗口的最大值

      题目描述:   给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{ ...

  5. USACO 4.1 Fence Loops

    Fence Loops The fences that surround Farmer Brown's collection of pastures have gotten out of contro ...

  6. 单行函数、表连接(day02)

    回顾: 1.数据库介绍 sql: dql: select dml: insert delete update ddl: create drop alter tcl: commit rollback s ...

  7. Windows10系统如何清除记录和关掉xbox录制

    在Windows的Xbox平台玩游戏时,总会发现以前玩过的许多游戏进度都保留着,麻烦的是白白的成就条让人感到相当的不爽,并且想删除还删不掉.某些当年一边玩一边录制的游戏,每当重新打开的时候都会弹出录制 ...

  8. node源码详解（三）

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource3 本博客同步在https://cnodejs.o ...

  9. Java代码规范和一些常见问题

       本文中的代码规范,是Java标准代码规范中的一小部分,在我看来,是最重要的一部分.    理想目标:不需要写注释,不需要和别人介绍,别人就知道你的项目大致是做什么的,每个类大概实现了什么功能. ...

  10. Python中对两种utf-8格式的理解

    1.python文件开头utf-8格式的理解 2.程序中读取文件时utf-8格式的理解 aa.py文件代码示例: #!/usr/bin/python # -*- coding:utf-8 -*- fr ...