面向对象的选择卡

末蓝、 2022-09-14 09:23 16阅读 0赞

**css:**

<style>
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
    
            #wrap {
                position: relative;
                top: 10px;
                left: 10px;
            }
    
            #wrap button {
                padding: 3px 5px;
                margin: 5px 10px;
            }
    
            #wrap button.active {
                background-color: lightpink;
                color: deeppink;
            }
    
            #wrap p {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                position: absolute;
                top: 40px;
                left: 10px;
                font-size: 24px;
                line-height: 200px;
                text-align: center;
                display: none;
            }
    
            #wrap p.active {
                display: block;
            }
        </style>

**html:**

<div id="wrap">
            <button class="active">菜单1</button><button>菜单2</button><button>菜单3</button>
            <p class="active">内容1</p>
            <p>内容2</p>
            <p>内容3</p>
        </div>

**javascript:**

<script>
            /* 
                面向过程:
                    点击每一个菜单按钮显示对应的p的内容
            */
            // 构造函数
            function Tab(id) {
                // 1.获取元素
                this.wrap = document.getElementById(id);
                this.btns = this.wrap.getElementsByTagName('button');
                this.ps = this.wrap.getElementsByTagName('p');
                console.log(this.btns, this.ps);
                var that = this;
                // 2.创建入口函数
                this.init = function () {
                    for (var i = 0; i < this.btns.length; i++) {
                        // 自定义索引
                        this.btns[i].index = i;
                        // 3.点击事件
                        this.btns[i].onclick = function () {
                            that.clickfn(this.index);
                        }
                    }
                };
                // 3.手动调用入口函数
                this.init();
                // 4.点击事件函数
                this.clickfn = function (ind) {
                    // 4.显示对应的p
                    for (var j = 0; j < this.ps.length; j++) {
                        this.ps[j].className = '';
                        this.btns[j].className = '';
                    }
                    this.ps[ind].className = 'active';
                    this.btns[ind].className = 'active';
                }
            }
            new Tab('wrap');
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_18_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_18_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_19_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2b77e7d1040d4647adf3c1c5a894b81f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/0056f4d966f244ffaa820e91079ea22b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/500bdcc9602444b5b3769544b848e814.png

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 js面向对象选项卡（this的使用）

案例1;面向过程选项卡 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

小灰灰/ 2024年02月17日 23:26/ 0 赞/ 55 阅读

相关面向对象技术 -- 面向对象概念

背景看了部分软工视频，对面向对象的概念有了些许的了解。什么是 > 面向对象=对象+类+继承+通信若一个系统使用这样 4 个概念设计和实现的，则这个软件系统

た入场券/ 2023年10月17日 21:53/ 0 赞/ 37 阅读

相关 es6 面向对象选项卡（自动轮播功能）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

港控/mmm°/ 2023年08月17日 15:38/ 0 赞/ 123 阅读

相关面向对象的概述--面向对象程序设计的思想

面向对象？？什么事对象呢？对象就是女朋友吗？错误！对象：是一个抽象的概率，英文是Object 表示任意存在的事物；世间万物皆为对象，对象是事物存在的实体。

矫情吗；*/ 2023年07月04日 11:29/ 0 赞/ 55 阅读

相关 c++面向对象和java面向对象的区别

作者：Khellendros 链接：[https://www.zhihu.com/question/29774397/answer/276514866][https_www

港控/mmm°/ 2023年03月12日 09:30/ 0 赞/ 281 阅读

相关【面向对象】对象的本质

文章目录对象的本质状态行为标识符对象的本质 > 对象是一个具有状态、行为和标识符的实体，结构和行为类似的对象被定义在它们共同的类

缺乏、安全感/ 2022年11月07日 11:39/ 0 赞/ 187 阅读

相关面向对象的选择卡

css: <style> { padding: 0; margin: 0;

末蓝、/ 2022年09月14日 09:23/ 0 赞/ 17 阅读

相关面向对象2--选项卡的改写

1.选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documen

╰+哭是因爲堅強的太久メ/ 2022年07月14日 02:43/ 0 赞/ 114 阅读

相关什么是面向对象?面向对象和面向过程的区别?

面向对象的概念：面向对象是一种思维方式面向对象是一种编程方式面向对象并不只针对某一种编程语言面向对象的基本思想是，从现实世界中客观存在的事物出发来构造软

我就是我/ 2022年06月11日 03:27/ 0 赞/ 444 阅读

相关【Java】排序（冒泡，选择）及面向对象

package 面向对象; import java.util.Scanner; public class Sort {

迷南。/ 2022年02月13日 15:57/ 0 赞/ 42 阅读