JavaScript实现选项卡功能(面向过程与面向对象)

2024-09-30 13:35:08

面向过程

注意：

ul>li 标签属性中的index属性值是串联起ol>li与ul>li的关键，通过调用相同索引下标的数组中的不同属性的属性值达到切换内容的效果。

通过事件委托找到对应的ul>li 进行css属性的删除与新增做到背景颜色改变和内容改变的效果。

<!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;
        }

        ul,ol,li{
            list-style: none;
        }

        .box{
            width: 800px;
            height: 600px;
            border: 3px solid #000;
            margin: 50px auto;
            display: flex;
            flex-direction: column;

        }

        .box > ul{
            width: 100%;
            height: 100px;
            display: flex;

        }

        .box > ul >li{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            background: pink;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            color: #fff;

        }

        .box > ul >li:last-child{
            border-right: none;
        }

        .box > ul >li.active{
            color: red;
            text-decoration: underline;
            background: orange;
        }

        .box > ol {
            flex: 1;
            position: relative;

        }

        .box > ol >li{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
            background: cyan;
            display: none;
            color: #fff;
        }

        .box > ol > li.active{
            display: flex;
        }

    </style>
</head>
<body>

    <div class="box"></div>

    <script>
        // 面向过程 

        // 定义数组 模拟数据库数据
        var arr1 = [
            { id:1 , ulLi:'精选' , olLi:'精选内容' },
            { id:2 , ulLi:'美食' , olLi:'美食内容' },
            { id:3 , ulLi:'百货' , olLi:'百货内容' },
            { id:4 , ulLi:'个护' , olLi:'个护内容' },
        ];

        // 获取标签对象
        const oBox = document.querySelector('.box');

        // 定义全局变量储存数据
        let oUlLis ;
        let oOlLis ;

        // 调用函数 动态渲染生成页面
        setPage();

        // 调用函数 添加事件
        setEvent();

        // 定义函数1 动态生成页面
        function setPage(){
            // 创建固定的标签节点 ul ol
            const oUl = document.createElement('ul');
            const oOl = document.createElement('ol');

            // 定义字符串 存储动态渲染生成的ul>li ol>li
            let ulLiStr = '';
            let olLiStr = '';

            // 循环遍历数组 根据数组中的内容动态渲染生成li标签
            arr1.forEach( function(item,key){
                // item 是 数组单元存储的数据 也就是 存储数据的对象
                // key 是 数组单元的索引下标

                // 第一个ul>li 有 class,active样式
                ulLiStr += key === 0 ? `<li name="ulLi" index="${key}" class="active">${item.ulLi}</li>` : `<li index="${key}" name="ulLi">${item.ulLi}</li>` ;

                // 第一个ol>li 有 class,active样式
                olLiStr += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>` ;
            });

            console.log( ulLiStr );
            console.log( olLiStr );

            // 将字符串写入ul ol 标签
            oUl.innerHTML = ulLiStr ;
            oOl.innerHTML = olLiStr ;

            // 将 ul ol 标签 写入 div标签中
            oBox.appendChild( oUl );
            oBox.appendChild( oOl );

            // 获取所有的ul>li
            oUlLis = oUl.querySelectorAll('li');

            // 获取所有的ol>li
            oOlLis = oOl.querySelectorAll('li');

        }

        // 定义函数2 给标签添加事件
        // 参数 绑定事件的事件类型 可以是click mouseover 默认值是 mouseover
        function setEvent( event = 'mouseover' ){
            // 给 父级标签 添加 事件 通过事件委托完成效果
            oBox.addEventListener( event , function(e){
                if( e.target.getAttribute('name') === 'ulLi' ){
                    // 清除所有 ul>li 的 class,active
                    oUlLis.forEach( function(item , key){
                        // item 是 ul>li中 li标签对象
                        // key 是 ul>li中 li标签对象的索引下标
                        // 同时也是 ol>li中 li标签对象的索引下标
                        item.classList.remove('active');

                        // key是ul>li的索引下标 也就是ol>li的索引下标
                        // oOlLs数组可以通过索引下标 获取到 ol>li标签对象
                        oOlLis[key].classList.remove('active');
                    })

                    // 给触发事件的ul>li标签添加class,active
                    e.target.classList.add('active');

                    // 给触发事件的ul>li标签 对应的ol>li标签添加class,active
                    // 也就是和 e.target 触发事件标签 索引下标相同的 ol>li标签
                    // 也就是获取 e.target标签 index属性的属性值
                    // 标签属性的属性值 都是 字符串类型 需要转化为数值类型
                    oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');

                }
            })
        }

    </script>

</body>
</html>

面向对象

注意：

之前调用的是变量，现在调用的是对象中存储的属性与属性值。
确保 this 的指向是对象，当事件绑定 forEach 定时器延时器... 中 this指向会改变
修改this指向的方法：提前使用变量存储原始this指向，使用变量替代 this关键词

代码展示：

<!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;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .box {
            width: 800px;
            height: 600px;
            border: 3px solid #000;
            margin: 50px auto;
            display: flex;
            flex-direction: column;

        }

        .box>ul {
            width: 100%;
            height: 100px;
            display: flex;

        }

        .box>ul>li {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            background: pink;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            color: #fff;

        }

        .box>ul>li:last-child {
            border-right: none;
        }

        .box>ul>li.active {
            color: red;
            text-decoration: underline;
            background: orange;
        }

        .box>ol {
            flex: 1;
            position: relative;

        }

        .box>ol>li {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
            background: cyan;
            display: none;
            color: #fff;
        }

        .box>ol>li.active {
            display: flex;
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <!-- 导入外部文件 -->
    <script src="./tab.js"></script>
    <script>
        // 定义数组 模拟数据库数据
        const arr1 = [
            { id: 1, ulLi: '精选', olLi: '精选内容' },
            { id: 2, ulLi: '美食', olLi: '美食内容' },
            { id: 3, ulLi: '百货', olLi: '百货内容' },
            { id: 4, ulLi: '个护', olLi: '个护内容' },
        ];

        // 获取标签对象
        const oBox = document.querySelector('.box');

        // ES6 构造函数 通过构造函数生成实例化对象
        const obj = new CreateTabObj(oBox, arr1);
        // 调用动态生成函数
        obj.setPage();
        // 调用点击事件函数，参数为事件类型
        obj.setEvent("click");

    </script>

</body>

</html>

外链构造函数代码：

// 在外部文件中定义构造函数
class CreateTabObj{
    // 构造器 定义属性和属性值
    // element  创建生成选项卡的标签对象
    // msgArr   生成选项开内容的数组
    constructor( element , msgArr ){
        this.ele = element ;
        this.arr = msgArr ;

        // 定义属性 存储 面向过程中 需要的全局变量
        this.oUlLis;
        this.oOlLis;
    }

    // 构造器外定义函数方法

    // 函数1 动态生成页面
    setPage(){
        // 创建固定的标签节点 ul ol
        const oUl = document.createElement('ul');
        const oOl = document.createElement('ol');

        // 定义字符串 存储动态渲染生成的ul>li ol>li
        let ulLiStr = '';
        let olLiStr = '';

        // 循环遍历数组 根据数组中的内容动态渲染生成li标签

        // 之前是 直接调用 变量 arr1 中 存储的数据
        // 现在是 调用 实例化对象中arr属性存储的数据
        // arr1 ---> this.arr
        this.arr.forEach( function(item,key){
            // item 是 数组单元存储的数据 也就是 存储数据的对象
            // key 是 数组单元的索引下标

            // 第一个ul>li 有 class,active样式
            ulLiStr += key === 0 ? `<li name="ulLi" index="${key}" class="active">${item.ulLi}</li>` : `<li index="${key}" name="ulLi">${item.ulLi}</li>` ;

            // 第一个ol>li 有 class,active样式
            olLiStr += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>` ;
        });

        // 将字符串写入ul ol 标签
        oUl.innerHTML = ulLiStr ;
        oOl.innerHTML = olLiStr ;

        // 将 ul ol 标签 写入 div标签中

        // 标签对象 ---> this.ele
        this.ele.appendChild( oUl );
        this.ele.appendChild( oOl );

        // 获取所有的ul>li
        this.oUlLis = oUl.querySelectorAll('li');

        // 获取所有的ol>li
        this.oOlLis = oOl.querySelectorAll('li');
    }

    // 函数2 添加事件
    // 设定参数 存储事件类型 可以是 click 可以是 mouseover 默认值是 mouseover
    setEvent( event = 'mouseover' ){
        // class 构造函数中 this指向 默认是 对象
        console.log( this);

        // 给 父级标签 添加 事件 通过事件委托完成效果

        // 提前定义一个变量 存储 原始this指向
        const _this = this ;

        // 事件绑定 中 this指向改变 

        this.ele.addEventListener( event , function(e){
            // 事件绑定中 this指向 默认是 事件源
            // 不再是 对象
            // 也就是在 事件绑定中 this.属性 不能 正确调用对象中的数据 

            if( e.target.getAttribute('name') === 'ulLi' ){

                // 清除所有 ul>li 的 class,active

                _this.oUlLis.forEach( function(item , key) {

                    // 给 ul>li 清除 class,active
                    item.classList.remove('active');
                    // 给 索引下标相同的 ol>li 清除 class,active
                    _this.oOlLis[key].classList.remove('active');
                })

                // 给 点击的 ul>li 添加 class,active
                e.target.classList.add('active');

                // 给 点击的 ul>li 索引下标 相同的 ol>li 添加 class,active
                _this.oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');

            }
        })
    }
}

运行结果：

到此这篇关于JavaScript实现选项卡功能(面向过程与面向对象)的文章就介绍到这了,更多相关JavaScript 选项卡内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JQuery 选项卡效果(JS与HTML的分离)

在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. Javascript(jquery)代码如下: 复制代码代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child&
原生js实现tab选项卡切换

本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre
一个js封装的不错的选项卡效果代码

复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>我们选项卡效果 www.jb51.net</titl
js选项卡的实现方法

本文实例讲述了js选项卡的实现方法.分享给大家供大家参考.具体分析如下: 一.思路 1. 获取元素: 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件: 3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none. 4. 点击当前按钮添加样式,把当前div显示出来,display设置为block. 二.html代码: <div id="div1"> <inpu
js实现简单选项卡功能

本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下首先我们来写HTML代码,构建出整体结构代码如下:  <nav id="nav"> <ul> <li class="act">选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> &
javascript实现tabs选项卡切换效果(自写原生js)

现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

本文实例讲述了JS实现滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-move-tab-nav-menu-demo-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
JavaScript实现选项卡功能(面向过程与面向对象)

目录面向过程面向对象面向过程注意: ul>li 标签属性中的index属性值是串联起ol>li与ul>li的关键,通过调用相同索引下标的数组中的不同属性的属性值达到切换内容的效果. 通过事件委托找到对应的ul>li 进行css属性的删除与新增做到背景颜色改变和内容改变的效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
php面向对象与面向过程两种方法给图片添加文字水印

目前绝大多数PHP程序员使用面向过程的方式,因为解析WEB页面本身就非常"过程化"(从一个标签到另一个标签).在HTML中嵌入过程处理代码是很直接自然的作法,所以PHP程序员通常使用这种方式. 如果你是刚接触PHP,用面向过程的风格来书写代码很可能是你唯一的选择.但是如果你经常上PHP论坛和新闻组的话,你应该会看到有关"对象"的文章.你也可能看到过如何书写面向对象的PHP代码的教程.或者你也可能下载过一些现成的类库,并尝试着去实例化其中的对象和使用类方法--尽管你可
面向对象和面向过程的区别(动力节点java学院整理)

面向过程是指,允许在程序中定义函数或者方法.也许你觉得奇怪,难道还有语言不能定义函数方法么?早期的basic就不可以,只能用跳转来实现函数调用. 面向对象更近一步,允许你将"过程"(函数.方法)以及它们的上下文相关的数据封装成对象,同时对象允许通过继承和派生以及类型限定符限制开发者对它的一部分的进行访问和修改. 我不想把面向对象和生活中的事物去联系,固然它们有些似是而非的联系,但是这对于你理解编程的本质毫无意义,甚至会误导你.面向对象的本质不是模拟现实世界的对象,而是为了开发强壮.简单
Python函数式编程之面向过程面向对象及函数式简析

目录 Python 函数式编程同一案例的不同写法,展示函数式编程面向过程的写法面向对象的写法接下来进入正题,函数式编程的落地实现 Python 函数式编程的特点纯函数 Python 函数式编程 Python 不是纯粹的函数式语言,但你可以使用 Python 进行函数式编程典型的听君一席话,如听一席话,说白了就是 Python 具备函数式编程的特性, so,可以借用函数式语言的设计模式和编程技术,把代码写成函数式编程的样子一般此时我会吹嘘一下,函数式代码比较简洁和优雅~ 好了,已经吹
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能

在Web中用到多选项卡功能的网站有很多,比如163和126邮箱,用过的人知道.本人在那么多的类似插件中,目前碰到这个比较好,花了点时间调试出来了,请看效果图: 这款插件叫jqueryMagicTabs,上图实现了基本功能,如添加选项卡,选择指定的选项卡.当添加的选项卡超过一定长度时会出现左右滑动的按钮,同时支持鼠标滑动选项卡. 这段代码如下所示: 复制代码代码如下: <%@ page language="java"contentType="text/html; cha
JavaScript tab选项卡插件实例代码

今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式. 原生函数写法将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面我们先来看看最原始的使用函数写法的代码: tab.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http
基于jquery实现的tab选项卡功能示例【附源码下载】

本文实例讲述了基于jquery实现的tab选项卡功能.分享给大家供大家参考,具体如下: jquery这款杀手级别的js框架,显然已成了开发界的标准js库,在开发一般web应用的时候,常常用到.今天找到一个实现jquery tab页的插件,效果还不错,比自己用javascript和css去实现一个tab页好多了.用 tab 页美化界面,对于用户体验来说是显而易见,让各种不同类型的数据分布在不同的tab页中.很直观,也避免了很多数据现在在一个界面中,显得很臃肿,看上去就怕.这一款基于jquery 的
基于JavaScript 实现拖放功能

HTML 的拖放 API 依赖 DOM 事件模型,获取拖放和放置元素的相关信息,以此实现拖放功能.我们只需要注册很少几个事件监听器,就能把任何元素变成可拖动或可放置的. 拖放 API 除了提供基本的拖放功能接口外,还可以在拖放之外提供选择,用来自定义行为.比如,可以修改拖放元素的 CSS 样式.或者,我们不移动元素,拖动的时候,复制一个副本,拖放结束后,我们就会多了一个同样的元素. 本篇只介绍实现基本的拖放功能. 将元素设置成可拖动的我们先从拖动元素开始.假设我们有一个容器元素,其中包含两种类
深入浅出理解JavaScript闭包的功能与用法

本文实例讲述了JavaScript闭包的功能与用法.分享给大家供大家参考,具体如下: 理解闭包关键是理解JS的对象的本质以及垃圾收集机制.函数也是对象,也有属性,通常执行一个函数时,局部变量在函数执行完后,内存会被回收,这是JS的垃圾收集机制决定的,如果想保存局部变量所占用的内存,就必须把保存在另一个不被回收的变量中,通常是全局变量.函数在创建时,内部属性[[Scope]]保存了作用域链,作用域链中包含外部函数以及全局对象的变量,被称为变量对象.所以把内部函数返回时,由于把函数保存了,所以内部属
JavaScript实现栈结构详细过程

目录一.认识栈结构二.栈结构封装三.十进制转化为二进制一.认识栈结构我们知道数组是一种常见的数据结构,并且可以在数组的任意位置插入和删除数据,但是有时候,我们为了实现某些功能,必须对这种任意性加以限制,而栈和队列就是比较常见的受限的数据结构,我们先来看看栈. 栈(stack),它是一种受限的线性表,后进先出(LIFO) 其限制性是允许在表的一端进行插入和删除运算.这一端被称为栈顶,相对的,把另一端,称为栈底. LIFO(last in first out)表示就是后进入的元素,第一个弹

JavaScript实现选项卡功能(面向过程与面向对象)

目录

面向过程

面向对象

相关推荐

随机推荐