原生js实现Tab切换(排他)功能

简介: 原生js实现Tab切换(排他)功能在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图:在这里插入图片描述HTML代码: <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <ul> <li></li> <

原生js实现Tab切换(排他)功能




在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图:

20200529135110596.gif

在这里插入图片描述

HTML代码:

<divclass="wrap"><divclass="box">1</div><divclass="box">2</div><divclass="box">3</div><divclass="box">4</div><ul><li></li><li></li><li></li><li></li></ul></div>


CSS代码:


    * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap {
            width: 500px;
            height: 400px;
            background: pink;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .box {
            width: 500px;
            height: 350px;
            position: absolute;
            left: 0;
            top: 50px;
            color: white;
            text-align: center;
            line-height: 350px;
            font-size: 150px;
        }
        .box:nth-of-type(1) {
            background: red;
        }
        .box:nth-of-type(2) {
            background: yellow;
        }
        .box:nth-of-type(3) {
            background: blue;
        }
        .box:nth-of-type(4) {
            background: green;
        }
        ul li {
            width: 125px;
            height: 50px;
            float: left;
        }
        ul li:nth-of-type(1) {
            background: red;
        }
        ul li:nth-of-type(2) {
            background: yellow;
        }
        ul li:nth-of-type(3) {
            background: blue;
        }
        ul li:nth-of-type(4) {
            background: green;
        }


JS代码:


 

    // 获取元素
    var aLi = document.getElementsByTagName("li");
    var aBox = document.getElementsByClassName("box");
    function none() {
        for (var i = 0; i <aBox.length;i++){aBox[i].style.display = "none";}}none();aBox[0].style.display = "block";//添加事件for(vari=0;i<aBox.length;i++){        // 储存 i
        aLi[i].index=i;
        aLi[i].onclick=function(){
            none();
            aBox[this.index].style.display="block";
        }
    }
    // aLi[0].onclick = function () {
    //     none();
    //     aBox[0].style.display = "block";
    // }
    // aLi[1].onclick = function () {
    //     none();
    //     aBox[1].style.display = "block";
    // }
    // aLi[2].onclick = function () {
    //     none();
    //     aBox[2].style.display = "block";
    // }
    // aLi[3].onclick = function () {
    //     none();
    //     aBox[3].style.display = "block";
    // }


注意:其实实现Tab切换功能并不难,但是要注意怎样才能让代码最简洁。其中就要说道js部分的for循环的应用,关键点在于找一个变量储存每次遍历的索引。


视频讲解链接:
https://www.bilibili.com/video/BV1L5411x7Ao/


相关文章
|
2月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
|
8天前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
3月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
1月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
37 5
|
1月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
27 2
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
45 0
|
1月前
|
JavaScript
js实现的精美彩色tab选项卡切换特效源码
js实现的精美彩色tab选项卡切换特效源码是一段基于JS实现的文件夹tab选项卡切换效果,拥有彩色、单色两种选择,点击标签选项卡可实现相应的变色效果,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
32 2
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
2月前
|
JavaScript 前端开发 API
|
2月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
53 1