Tab栏切换

Tab栏切换

 

先循环给每个小li添加点击事件，并且在点击事件里，循环每个小li，让其他小li为未选中状态（排他），把自己为选中状态；但是在循环小li，没添加点击事件之前，先为小li添加自定义属性，方便之后为一一对应的模块做显示

for (var i = 0; i < li.length; i++) {
            //循环给每个li添加自定义属性，方便一会显示对应的模块
            li[i].setAttribute('index', i)
            //在点击事件里，循环每个小li，让其他小li为未选中状态（排他），把自己为选中状态
            li[i].onclick = function () {
                for (var i = 0; i < li.length; i++) {
                    li[i].className = ''
                }
                this.className = 'current'
                //接下来显示对应模块
                var index = this.getAttribute('index')
                for (var i = 0; i < item.length; i++) {
                    item[i].style.display = 'none'
                }
                item[index].style.display = 'block'
            }
        }