js选项卡制作

选项卡

选项卡在很多项目中都有用到，下面是我用原生js做的选项卡，如有不足，望指正。

html结构与样式

头部导航采用flex布局，等宽分布li元素。设置颜色是为了区分界限。
内容部分宽高占满剩余的空间，每个内容块宽高100%。
通过display属性让选中项内容显示，其他项内容隐藏。
css中的on样式：选中的那一项，增加的样式（头部li元素）。
css中的show样式：选中的那一项的内容，增加的样式（内容的div元素，show用来显示此元素）。
思路：在鼠标点击（或经过）时，通过for循环，清空所有li元素和内容div元素的样式（on和show），在for后面给当前选中项的头部li元素加on样式，给内容div元素增加show样式。

    
    
    





    

        
1
        
2
        
3
    
    

        
内容1
        
内容2
        
内容3
    

效果图

js部分

将.content div样式中的注释去掉，刷新后所有内容div都隐藏了。接下来编写js代码：

一个简单的选项卡就完成了。
对于index这块，如果第一层for循环使用let而不是var，可以不需要index和num来做头部与内容的连接。使用var时，在点击的事件函数得到的i一直是len，使用let时，得到的是对应li元素的序号。
修改部分的代码：

    function clickEvent() {
        for(let i=0;i

通过数据来渲染选项卡

选项卡很多时候都是要改的，如果把html结构固定，不利于维护。
下面是通过数据来渲染选项卡：
html结构如下：

js代码如下：