如何用原生JavaScript编写实现Tabs标签页功能的示例代码？

本文共计1212个文字，预计阅读时间需要5分钟。

最近重新学习了JavaScript，动手实现了一个tabs标签页。首先，这是一个前端页面。如图1所示，tabs分页如下：图2所示，tabs分页包括一个大的框架div，顶部红色的框架是导航栏。

最近在重新学习JavaScript，手写了一个tabs标签页。

话不多说，直接开始。

首先，是前端页面。

图1 tabs

先来把tabs分解一下：

图2 tabs分解

首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个span，一个用来放导航的名字，一个用来放导航关闭的icon，右边是一个button，用来添加新的导航栏及内容；下方是导航栏的内容section。