<style>
        *{
            margin: 0;
            padding:0;
        }
        ul,ol,li{
            list-style: none;
        }
        .cont{
            width: 800px;
            height: 600px;
            border: 5px solid #000;
            margin: 30px auto;
            display: flex;
            flex-direction: column;
        }
        .cont>ul{
            width: 100%;
            height: 60px;
            display: flex;
        }
        .cont>ul>li{
            flex:1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            color: #fff;
            background: skyblue;
        }
        .cont>ul>li.active{
            background: blue;
        }
        .cont>ul>li:nth-child(2){
            border-left:5px solid #000 ;
            border-right:5px solid #000 ;
        }
        .cont>ol{
            flex:1;
            position: relative;
        }
        .cont>ol>li{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            color: #000;
            font-size: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
        .cont>ol>li:nth-child(1){
            background: orange;
        }
        .cont>ol>li:nth-child(2){
            background: pink;
        }
        .cont>ol>li:nth-child(3){
            background: green;
        }
        .cont>ol>li.active{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="cont">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">内容1</li>
            <li >内容2</li>
            <li >内容3</li>
        </ol>
    </div>
    <script>
        // tab切换 / 选项卡菜单
        // 思路
        // 点击 ul>li 给 ol>li 设定 class样式
        // 点击 ul>li 
        //     1,给所有的 ul>li 清除样式,给当前点击的li,添加样式
        //     2,给所有的 ol>li 清除样式,给当前点击的ul>li,对应的ol>li添加样式
        // 关键原理:
        //     ul>li  和 ol>li 标签数量是完全相同的
        //     存储标签的伪数组  oUlLis  和  oOlLis 索引下标是完全相同的
        //     两个 伪数组 索引是一一对应的,可以相互通用
        var oUlLis = document.querySelectorAll('ul>li');
        var oOlLis = document.querySelectorAll('ol>li');
        console.log(oUlLis , oOlLis);
        // 循环遍历, ul>li 的伪数组 
        // item 存储的是 ul>li 标签   key 是标签对应的索引下标
        oUlLis.forEach(function(item,key){
            // 添加点击事件,点击标签,触发程序,给点击的标签,添加className的属性值
            // 给 ul>li标签 添加点击事件
            item.addEventListener('click' , function(){
                // 点击标签时,清除所有标签的class样式
                // 给所有的li标签都定义 className属性值 为 '' 空字符串
                
                // 执行 循环,遍历所有的ul>li标签
                oUlLis.forEach(function(i,k){
                    // 给li标签,清除class样式,设定className 为 空字符串
                    i.className = '';
                    // 使用 ul>li的索引下标,也可以调用ol>li的索引下标
                    // 调用 ol>li标签,也清除class样式,设定className 为 空字符串
                    oOlLis[k].className = '';
                    // 循环结束 ul>li ol>li 都没有 class样式
                })
                // 给点击的ul>li标签,添加class样式
                item.className = 'active';
                // 通过 item 的索引下标key,找对 ol中对应的li标签
                // 添加class样式
                oOlLis[key].className = 'active';
            })
        })
    </script>

tab切换之循环遍历的更多相关文章

  1. angular 实现tab切换（循环输出tab标题及tab下属内容，非direct,非include）

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

  2. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  3. JavaScript学习笔记2之Tab切换

    1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...

  4. vue仿淘宝订单状态的tab切换效果

    <div class="navigation">  //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...

  5. VUE 实现tab切换页面效果

    一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. Vue如何tab切换高亮最简易方法

    以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量, ...

  7. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  8. JS---案例：tab切换效果

    案例:tab切换效果 获取所有的li标签 第一件事:把这个a所在的所以兄弟元素的类样式全部移除 (removeAttributes) 第二件事:当前点击的a父级元素li (点击这个a所在的所在元素li ...

  9. jQuery的DOM操作实例（1）——选项卡&&Tab切换

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

  10. Tab切换类型

    Tab切换类型 点击Tab 滑过Tab 延迟Tab CSS样式 ; ; list-style:none; font-size:12px;} .notice{width:298px; height:98 ...

随机推荐

  1. 力扣141(Java)-环形链表（简单）

    题目: 给你一个链表的头节点 head ,判断链表中是否有环. 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环. 为了表示给定链表中的环,评测系统内部使用整数 pos ...

  2. ESXI 6.5 零基础从安装到批量生成/管理虚拟机简易教程

    制造U盘安装盘 1 先提前下载好,ESXI 6.5 ISO文件. 2 下载制作U盘安装工具,RUFUS. Rufus非常小巧的绿色EXE文件,默认配置选中ISO文件就可以,点击开始,就自动制作,非常方 ...

  3. 硬之城携手阿里云 Serverless 应用引擎（SAE）打造低代码平台

    简介: 简化用云的成本,把复杂留给自己,简单留给用户. 作者 | 陈泽涛(硬之城产品总监)& 洛浩(阿里云云原生高级架构师) 硬之城成立于 2015 年,是一家以电子元器件 BOM 整体供应为 ...

  4. 科普达人丨漫画图解什么是eRDMA？

    简介: 绕过CPU,将数据直接从一台计算机的内存传输到另一台计算机,进行网络加速 在一个领先的阿里云数据中心里,数百台服务器(也就是大型的计算机)在疯狂工作和通信,他们正在合力完成一个大型的大数据处理 ...

  5. Alibaba/IOC-golang 正式开源 ——打造服务于go开发者的IOC框架

    简介: IOC(inversion of control)即控制反转,是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.IOC-golang 是一款服务于Go语言开发者的依赖注入框架 ...

  6. 技术解读：英特尔 x86 平台上，AI 能力是如何进行演进的？（附PPT）

    ​简介:AI 生态系统是怎样的?其中又有哪些关键技术? AI 计算力的指数增长意味着,为了解决越来越复杂的用例,即使是 1000 倍的计算性能增长也很容易被消耗.因此,需要通过软件生态系统的助力,才能 ...

  7. WPF自定义控件的三种方式

    ​简介: 某些场景下,我们确实需要创建新的控件.此时,理解 WPF不同控件的创建方法就显得非常重要. WPF 提供3个用于创建控件的方法,每个方法都提供不同的灵活度. WPF控件可以通过数据模型(Da ...

  8. Higress 基于自定义插件访问 Redis

    简介 基于 wasm 机制,Higress 提供了优秀的可扩展性,用户可以基于 Go/C++/Rust 编写 wasm 插件,自定义请求处理逻辑,满足用户的个性化需求,目前插件已经支持 redis 调 ...

  9. golang、JS AES(CBC模式)加密解密兼容

    目录 golang.JS AES(CBC模式)加密解密兼容 golang代码 前端javascript的代码 aes.js 原文地址: https://www.cnblogs.com/haima/p/ ...

  10. Python——基本输入和输出

    Python提供了基本的输入和输出功能,这些功能通常是通过内置的input()函数(用于输入)和print()函数(用于输出)来实现的.以下是这两个函数的详细描述和示例: 1. print() 函数( ...