思路：

① 遍历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. stylus解决移动端1像素线等问题

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

  2. 51nod1596 搬货物

    现在有n个货物,第i个货物的重量是 2wi .每次搬的时候要求货物重量的总和是一个2的幂.问最少要搬几次能把所有的货物搬完. 样例解释: 1,1,2作为一组. 3,3作为一组. Input 单组测试数 ...

  3. 2.SpringBoot的properties的属性配置详解

    SpringBoot是为了简化Spring应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖就可以 ...

  4. UOJ #131 BZOJ 4199 luogu P2178【NOI2015】品酒大会 (后缀自动机、树形DP)

    水是水,但是写出了不少问题,因此写一发博客. https://www.luogu.org/problemnew/show/P2178 https://www.lydsy.com/JudgeOnline ...

  5. Spring Boot-整合Mybatis(五)

    原始的整合方式 1.添加依赖 <!--mybatis起步依赖--> <dependency> <groupId>org.mybatis.spring.boot< ...

  6. [bzoj3505][CQOI2014]数三角形_组合数学

    数三角形 bzoj-3505 CQOI-2014 题目大意:给你一个n*m的网格图,问你从中选取三个点,能构成三角形的个数. 注释:$1\le n,m\le 1000$. 想法:本来是想着等中考完了之 ...

  7. mysql 服务器监控系列-黄杉 mysqldba

    http://blog.csdn.net/mchdba/article/category/2220809

  8. binlog

    binlog基本定义:二进制日志,也成为二进制日志,记录对数据发生或潜在发生更改的SQL语句,并以二进制的形式保存在磁盘中: 作用:MySQL的作用类似于Oracle的归档日志,可以用来查看数据库的变 ...

  9. ThreadPoolExecutor源码分析（一）

    一.前言 闲来无事,博主有重新翻看了一下jdk1.8版的ThreadPoolExecutor源码,看后写此笔记,画个圈圈,做个记录,这段源码,我看过,到处一游,嘻嘻~~ 二.ThreadPoolExe ...

  10. [CSS3] :empty Selector

    When the element has empty content, you might want to display some text to idicate the compoent is l ...