HTML页面，CSS和JS已经引入，直接复制即可
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title>ES6</title> 7 <link rel="stylesheet" type="text/css" href="http://tab.wuliwu.top/style.css" /> 8 </head> 9 <body> 10 <main> 11 <h4> 12 ES6面向对象 动态添加标签页 13 </h4> 14 <div class="tabsbox" id="tab"> 15 <nav class="firstnav"> 16 <ul> 17 <li class="liactive"><span>标签1</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> 18 <li><span>标签2</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> 19 <li><span>标签3</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> 20 </ul> 21 <div class="tabadd"> 22 <span>+</span> 23 </div> 24 </nav> 25 <div class="tabscon"> 26 <section class="conactive">内容1</section> 27 <section>内容2</section> 28 <section>内容3</section> 29 </div> 30 </div> 31 32 </main> 33 <script src="http://tab.wuliwu.top/tab.js"></script> 34 </body> 35 </html>