C1前端见习工程师试题卷（1.2）：JS编程题之控制DOM addEventListener() 方法

• • 前言
  • 第四部分：编程题题（未用 JavaScript 完成编码则不计分，20%）
  • • 45. 请实现以下图片的效果
  • 资料来源

此题仅供参考，题目来自 CSDN 官方题库以及模拟试卷整合而来。题中答案若有错误或争议点，请在下方留言！！！
  整理不易，记得观看后，一键三联！！！

手动点击时完成 Tab 切换即可

  解题思路：
  1、tab栏目（tabs）与内容栏目（content）都可以使用列表元素进行快速排版

        
Tab1
        
Tab2
        
Tab3
        
Tab4
        
Tab5
    
    

        
这是第一个页面
        
这是第二个页面
        
这是第三个页面
        
这是第四个页面
        
这是第五个页面
    

  2、通过获取列表元素的class控制切换

	var tabs = document.querySelectorAll('.tabs .tab')
    var content = document.querySelectorAll('.content .item')

获取到的元素展示如下：

  3、获取有多少个切换栏目和内容

var tabsLen = tabs.length
var contentLen = content.length

获取到的元素展示如下：

  4、进行控制点击事件

		//使用let 关键字来实现块级作用域，这里相当于定义的意思
        //进行利用获取到的tabs总共个数作为判断条件
        for (let i = 0; i < tabsLen; i++) {
            // 用循环中的tabs索引数来控制点击事件
            tabs[i].addEventListener('click', function () {
                this.classList.add('active')
                content[i].style.display = 'block'
                for (let j = 0; j < contentLen; j++) {
                    if (i !== j) {
                        tabs[j].classList.remove('active')
                        content[j].style.display = 'none';
                    }
                }
            })
        }

参考答案：以下是详细实现代码

    
    
    
    
    




    

        
Tab1
        
Tab2
        
Tab3
        
Tab4
        
Tab5
    
    

        
这是第一个页面
        
这是第二个页面
        
这是第三个页面
        
这是第四个页面
        
这是第五个页面
    

    

tips：此题可以参考试卷1填空题42，后续有时间再补充解析和其他实现方式。

  感谢下述文档提供的资料！！！参考文献如下：

1. JavaScript let 和 const

2. HTML DOM addEventListener() 方法