JavaScript案例（六）：选项卡；JavaScript简单版面向对象案例：选项卡

最新推荐文章于 2024-05-29 18:02:20 发布

小张小张啊

最新推荐文章于 2024-05-29 18:02:20 发布

阅读量1.6k

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_43969648/article/details/123445650

版权

简单版面向对象案例：选项卡

1. 抽象内容

一个能够完成选项卡的对象，需要有哪些属性和方法。

属性：所有可以点击的按钮盒子；

属性：所有可以切换的选项盒子；

方法：能添加点击事件的方法。

2. 书写构造函数

能创建一个对象，包含两个属性和一个方法；

属性直接写在构造函数体内；

方法写在构造函数的原型上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象选项卡</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        .tab {
            width: 600px;
            height: 400px;
            border: 3px solid #373737;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        ul {
            height: 60px;
            display: flex;
        }

        ul > li {
            flex: 1;
            display: fle

最低0.47元/天解锁文章

小张小张啊

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例（六）：选项卡；JavaScript简单版面向对象案例：选项卡

简单版面向对象案例：选项卡1. 抽象内容一个能够完成选项卡的对象，需要有哪些属性和方法。属性：所有可以点击的按钮盒子；属性：所有可以切换的选项盒子；方法：能添加点击事件的方法。2. 书写构造函数能创建一个对象，包含两个属性和一个方法；属性直接写在构造函数体内；方法写在构造函数的原型上。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫