JS实现Tab栏切换的两种方式案例详解

面向过程的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 500px;
            border: 1px solid red;
        }
        ul{
            overflow: hidden;
        }
        ul>li{
            list-style: none;
            float: left;
            width: 50px;
            text-align: center;
        }
        div>div{
            height: 300px;
            background-color: pink;
            text-align: center;
            font-size: 50px;
        }
        #lastBox{
            display: none;
        }
        .selected{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li id="first" class="selected">1</li>
            <li id="last">2</li>
        </ul>
        <div id="firstBox">11111</div>
        <div id="lastBox">222222</div>
    </div>
    <script>
       var lis =  document.querySelectorAll('ul>li')
       var content =  document.querySelectorAll('div>div')
       //藏值  通过属性来保存对应的值   通过对应的对象来藏
       //加所有li添加点击事件
       for(var i=0;i<lis.length;i++){
            // lis[i].setAttribute('data-index',i)
            lis[i].index = i
            lis[i].onclick = function(){
                //排他思想 先将所有的全部设置一个值 然后再给自己设置一个值
                for(var j=0;j<lis.length;j++){
                    lis[j].className = ""
                }
                this.className = "selected"
                //排他
                //先将其他的都隐藏 再给自己显示
                for(var j=0;j<content.length;j++){
                    content[j].style.display = "none"
                }
                // document.getElementById(this.id+'Box').style.display = 'block'
                // content[this.getAttribute('data-index')].style.display = 'block'
                content[this.index].style.display = 'block'
            }
       }
    </script>
</body>
</html>

面向对象的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 400px;
            height: 400px;
            border: 2px solid pink;
            margin: 0 auto;
        }
        ul{
            display: flex;
            margin: 0 auto;
            width: 400px;
            position: relative;
        }
        ul>li{
            list-style: none;
            width: 100px;
            height: 50px;
            font-size: 40px;
            text-align: center;
            border: 1px solid white;
            background-color: yellow;

        }
        ul .showli{
            background-color: orange;
        }
        #box div{
            width: 400px;
            height: 350px;
            position: absolute;
            display: none;
        }

        #box .show{
            display: block;
            background-color: rgb(0, 183, 255);
            font-size: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="showli">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <script>
        //用面向对象的思维写tab栏切换
        //属性：选项框，选项框对应要切换的页面
        class Tab{
            constructor(ele){
                this.box = document.getElementById(ele);
                this.lis = this.box.querySelectorAll('ul > li');
                this.divs = this.box.querySelectorAll('div');
            }

            change()
            {
                // console.log(this.box);
                // console.log(this.lis);
                // console.log(this.divs);

                for(var i = 0; i < this.lis.length; i++)
                {
                    //保存当前this指向
                    var _this = this;
                    //保存每一个li的下标，便于切换指定div
                    this.lis[i].index = i;
                    //每一个li添加点击事件
                    this.lis[i].onclick = function()
                    {

                        //排他，清空所有li与盒子的类名
                        for(var j = 0; j < _this.lis.length; j++)
                        {
                            _this.lis[j].className = "";
                            _this.divs[j].className = "";
                        }
                        //单独设置点击的li类名，让其样式和其余未被点击的li不同
                        this.className = "showli";

                        //检查当前li的下标是否成功保存
                        // console.log(this.index);

                        //让li对应的div显示出来
                        _this.divs[this.index].className = "show";
                    }

                }
            }
        }

        var tab = new Tab("box");
        tab.change();

    </script>
</body>
</html>

到此这篇关于JS实现Tab栏切换的两种方式的文章就介绍到这了,更多相关JS Tab栏切换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript实现Tab标签页切换的最简便方式(4种)

    JavaScript实现Tab标签页切换的最简便方式(4种)

    先说一下最土的一种方法: Html: <div class="tab-head"> <h2 id="tab1" onmouseover="changeTab1()" class="selected">1</h2> <h2 id="tab2" onmouseover="changeTab2()">2</h2> <h2 id=

  • JavaScript TAB栏切换效果的示例

    代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo

  • js实现tab栏切换效果

    本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现tab栏切换</title> <style> * { margin: 0; margin: 0; padding: 0; list-style: none; } .nav

  • JavaScript实现简易tab栏切换案例

    JavaScript实现简易tab栏切换案例

    本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下 1. tab栏-案例1 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想: 1).所有元素全部清除样式(干掉其他人) 2).给当前元素设置样式 (留下我自己) 3).注意顺序不能颠倒,首先干掉其他人,再设置自己 我的思路: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta char

  • JavaScript实现tab栏切换的效果

    JavaScript实现tab栏切换的效果

    tab栏:点击不同的标签,显示不同的内容,被点击的标签样式发生改变(突出选中的是哪一个) 实现思路: 1.将tab栏分为上下两部分,上面是导航列表,下面是各部分对应的内容.把标签和内容都写出来,内容按照标签顺序依次顺着写,给标签都添加自定义属性- - -index,属性值从0开始,依次增加1 2.首先实现上面的效果,点击后样式切换,被点击的字体颜色.背景颜色改变等: ①css定义一个类eg:current,里面定义改变后的样式,先给第一个标签写一个该类名,其他的不写类名, ②js获取所有标签元素

  • 原生js+css实现tab切换功能

    本文实例为大家分享了原生css+js实现tab切换功能的具体代码,供大家参考,具体内容如下 现在很多的ui框架都集成了tab功能,使用过程中只需按照他们的api套用即可,但在有时jquery项目中会觉得为了一个tab功能再单独调用一个ui库有些小题大做,所以博主这里推荐了原生tab的实现 分析:通过display属性控制每一个tab的显示 以下是图片示例: 以下是代码部分: <!DOCTYPE html> <html lang="en"> <head>

  • JS实现Tab栏切换的两种方式案例详解

    面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

  • QT实现多线程两种方式案例详解

    Qt线程 Qt4.7之前版本处理步骤 1.自定义一个类,继承于QThread. class MyThread:public QThread{ public: vid run(); //虚函数 线程处理函数(和主线程不在同一个线程) signals: void isDone(); //信号 线程执行完发送 } void MyThread::run() { // 实现 -- 复杂的处理过程 emit isDome; // 发送线程 }; 2.定义线程 MyThread thread; 3.开启线程

  • Vue路由切换的两种方式示例详解

    目录 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 1.2 路径切换 1.3 path切换 1.4 name切换(推荐) 2. js切换 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 语法:<a href=“# + 路由路径”>标签内容</a> 例子: 路由规则为: const router = new VueRouter({ //路由对象数组 routes: [{ path: '/login', component:

  • Android实现旋转动画的两种方式案例详解

    Android实现旋转动画的两种方式案例详解

    目录 练习案例 效果展示 前期准备 自定义 View java代码编写 方法一 方法二 易错点总结: 练习案例 视差动画 - 雅虎新闻摘要加载 效果展示 前期准备 第一步:准备好颜色数组 res => values => colors.xml <color name="orange">#FF9600</color> <color name="aqua">#02D1AC</color> <color n

  • java 实现websocket的两种方式实例详解

    一.介绍 1.两种方式,一种使用tomcat的websocket实现,一种使用spring的websocket 2.tomcat的方式需要tomcat 7.x,JEE7的支持. 3.spring与websocket整合需要spring 4.x,并且使用了socketjs,对不支持websocket的浏览器可以模拟websocket使用 二.方式一:tomcat 使用这种方式无需别的任何配置,只需服务端一个处理类, 服务器端代码 package com.Socket; import java.io

  • ubuntu 16.04安装redis的两种方式教程详解(apt和编译方式）

    ubuntu 16.04安装redis的两种方式教程如下所示: 方式一 :apt安装 在 Ubuntu 系统安装 Redi 可以使用以下命令: $sudo apt-get update $sudo apt-get install redis-server 启动 Redis $ redis-server 查看 redis 是否启动? $ redis-cli 以上命令将打开以下终端: redis 127.0.0.1:6379> 127.0.0.1 是本机 IP ,6379 是 redis 服务端口.

  • Spring加载properties文件的两种方式实例详解

    Spring加载properties文件的两种方式实例详解

    在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可,不需要修改源代码,这样更加方便.在Spring中也可以这么做,而且Spring有两种加载properties文件的方式:基于xml方式和基于注解方式.下面分别讨论下这两种方式. 1. 通过xml方式加载properties文件 我们以Spring实例化dataSource为例,我们一般会在beans

  • Windows10安装linux子系统的两种方式(图文详解)

    Windows10支持Linux子系统了,告别繁琐的双系统.虚拟机安装,原生安装方便快捷. windows subsystem for linux简称WSL. 这里介绍2种安装方式,总有一款适合你. 图形化安装 启用开发者模式 按下 Windows 键,打开设置 设置-->更新和安全-->开发者选项-->开发人员模式 开启适用于Linux的Windows子系统按下 Windows jian键,输入控制面板 打开控制面板 打开 应用或关闭Windows功能 ,勾选 适用于Linux的Win

  • C# 总结QueueUserWorkItem传参几种方式案例详解

    最近在学习citrix的xenserver6.2的源代码,发现多处用到System.Threading命名空间下的ThreadPool.QueueUserWorkItem方法: public static bool QueueUserWorkItem(WaitCallback callBack, object state); publicstaticbool QueueUserWorkItem(WaitCallback callBack); 参数WaitCallback 本身是一个delegat

  • JS小球抛物线轨迹运动的两种实现方法详解

    本文实例讲述了JS小球抛物线轨迹运动的两种实现方法.分享给大家供大家参考,具体如下: js实现小球抛物轨迹运动的大致思路: 1.用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果 2.绘制小球和运动区域,运动区域可通过flex布局实现垂直居中 3.用物理公式S(y)=1/2*g*t*t,S(x)=V(x)t来计算路径 现确定V(x)=4m/s,刷新的时间间隔设置为0.1s.原本px和米之间的转换,不同尺寸转换不同,本例采用17寸显示器,大约1px=0.4mm.但浏览器

随机推荐