思路：

① 遍历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. CF1168B Good Triple 性质分析_好题

    题意翻译 给出01串s,求数对[l,r]个数,使得能找到至少一对[x,k],使1<=x,k<=|s|且l<=x<x+2k<=r且s[x]=s[x+k]=s[x+2k] 题 ...

  3. es6-Symbol用法

    1.symbol概念 这种数据类型提供独一无二值 比如,在JS中,我可以通过数据类型生成变量a=number05,也可以生成b=nubmer05,这两个变量可以说是相等的. 但是用symbol生成的值 ...

  4. 移动端自动化测试-WTF Appium

    手机App分为两大类,原生App(Native App)和混合APP(Hybrid App) 原生App(Native App) 原生App实际就是我们所常见的传统App开发模式,云端数据存储+App ...

  5. lua_自己对“lua函数”知识点的总结

    lua_自己对“lua函数”知识点的总结 1.lua函数的定义 --lua中,函数都是function类型的对象.(1)其可以被比较 (2)其可以赋值给一个对象(3)可以传递给函数(4)可以从函数中返 ...

  6. kernel学习单

    lock (spin_lock, mutex, rw_mutex/spinlock) waitqueue, tasklet, softIRQ, hardIRQ basic struct (atomic ...

  7. stylus解决移动端1像素线等问题

    引用了yo框架中的_border.scss(用来获取yo框架封装的border)   以及   variables.scss(用来获取媒体查询的规则) border($border-width = 1 ...

  8. springboot启动报：Error creating bean with name 'dataSource' defined in class path resource

    需要在启动类的@EnableAutoConfiguration或@SpringBootApplication中添加exclude = {DataSourceAutoConfiguration.clas ...

  9. Netty学习总结（2）——Netty的高性能架构之道

    Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用 ...

  10. [bzoj1084][SCOI2005]最大子矩阵_动态规划_伪·轮廓线dp

    最大子矩阵 bzoj-1084 SCOI-2005 题目大意:给定一个n*m的矩阵,请你选出k个互不重叠的子矩阵使得它们的权值和最大. 注释:$1\le n \le 100$,$1\le m\le 2 ...