复习——高级语法对象原型,es5新增语法

今天的开始进入了js的高级语法 我马上也要复习完了,之前学到闭包递归,就回去复习去了,复都复习这么久而且,复习的过程真的比学知识的过程难熬的多,只不过终于要复习完了,再来点es6的新语法马上就要步入vue了,想想都有点小激动,今天首先来的第一个案例我称之为目前为止的史诗级难度,第一次做的时候懵懵懂懂的,这第二次复习到再做慢慢的有点感觉了,也懂了很多但还是有一些部分自己独立完成不了,这是一个基于面向对象的tab栏,我第一次做的时候应该也在下面开贴了,这一次做收货照样很多,不多说了先看效果吧

先来html代码吧,js下面再说

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>面向对象 Tab</title>
<link rel=“stylesheet” href=“./styles/tab.css”>
<link rel=“stylesheet” href=“./styles/style.css”>
</head>

<body>

<main\>
    <h4\>
        
        Js 面向对象 动态添加标签页
    </h4\>
    <div class\="tabsbox" id\="tab"\>
        <!-- tab 标签 \-->
        <nav class\="fisrstnav"\>
            <ul\>
                <li class\="liactive"\><span\>测试1</span\><span class\="iconfont icon-guanbi"\></span\></li\>
                <li\><span\>测试2</span\><span class\="iconfont icon-guanbi"\></span\></li\>
                <li\><span\>测试3</span\><span class\="iconfont icon-guanbi"\></span\></li\>
            </ul\>
            <div class\="tabadd"\>
                <span\>+</span\>
            </div\>
        </nav\>

        <!-- tab 内容 \-->
        <div class\="tabscon"\>
            <section class\="conactive"\>测试1</section\>
            <section\>测试2</section\>
            <section\>测试3</section\>
        </div\>
    </div\>
</main\>