Tab栏切换

最新推荐文章于 2023-06-24 18:17:01 发布

ES6

最新推荐文章于 2023-06-24 18:17:01 发布

阅读量162

点赞数

分类专栏： DOM，BOM 文章标签： js

本文链接：https://blog.csdn.net/weixin_48340600/article/details/108730159

版权

DOM，BOM 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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'
            }
        }