随着互联网和移动互联网的发展，Web前端开发工程师的需求越来越多，也越来越重要。而js选项卡作为一种页面交互效果，使用越来越广泛，也是前端开发工程师入门必学的知识点之一。本篇文章就来跟大家分享一下学习手写js选项卡，打造页面交互效果的过程吧！

1. 选项卡的常见形式

首先，我们来看下选项卡的常见形式。选项卡的一般形式可以分为两种：水平选项卡和垂直选项卡。水平选项卡一般位于页面的上方，每个选项卡对应着不同的内容页面；而垂直选项卡则一般位于页面的左侧，也是每个选项卡对应着不同的内容页面。在实际开发中，我们可以根据实际需要来选择使用哪种选项卡形式。

除了这两种常见形式以外，选项卡的样式还是比较自由的。我们可以根据实际需求，自行定义选项卡的大小、颜色、边框等样式。

2. 手写js选项卡的过程

接下来，我们来介绍一下手写js选项卡的过程。下面我们以水平选项卡为例，来展示选项卡的实现方法。

2.1 HTML 结构

选项卡的实现，首先要先确定好HTML结构。我们需要建立一个选项卡盒子，在其中创建选项卡头和选项卡内容两个部分。其中，选项卡头集合和选项卡内容集合可以使用ul标签和div标签来实现。这些元素的具体实现可以参考下面的代码。

```