复习——高级语法对象原型,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\>