蓝桥杯前端Web赛道-卡片化标签

蓝桥杯前端Web赛道-卡片化标签

题目链接：5.卡片化标签页 - 蓝桥云课 (lanqiao.cn)

首先看题目要求：

请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。

页面效果如下所示：

运行题目，通过观察我们可以发现，其实这道题就是一个类名的切换，拥有active这个类名的内容，就是当前选择的内容，所以我们只需要在选项这个地方添加监听事件，当点击改选项的时候，对应的内容也添加active类名，展现对应的图片和文字。

那么，首要工作就是我们需要获取到选项和内容，方便我们添加类名，由于题目要求页面布局部分不能做任何修改操作,所以我们不能使用getElementById，通过观察，我们使用querySelectorAll来找到这两部分。

querySelectorAll和querySelector都是用来选择DOM元素的方法，但它们有一些区别。

querySelectorAll可以接受多个选择器作为参数，而querySelector只能接受一个选择器作为参数。

querySelector只返回第一个匹配选择器的元素，它返回的是一个单个的元素对象。如果没有匹配的元素，它会返回null。

使用querySelectorAll会让我们找的更加准确

所以代码如下

 let list = document.querySelectorAll(".tabs div"); //找到选项卡
 let card = document.querySelectorAll("#content div");//找到内容显示的位置

接下来我们应该遍历list并对它的每一项进行监听，这样我们才能准确的添加类名

完整代码如下

 list.forEach((item, index) => {
    item.addEventListener("click", () => {
      item.classList.add("active");
      card[index].classList.add("active");
      list.forEach((value, index) => {
        if (value != item) {
          value.classList.remove("active");
          card[index].classList.remove("active");
        }
      });
    });
  });

添加监听器不用我过多赘述

item.classList.add("active");
card[index].classList.add("active");

这两行代码的意思是，当监听到鼠标点击事件的时候，给当前的选项添加active类名，并且刚好第一项就对应了内容1，所以可以通过索引来确定当前应该渲染出哪组内容

虽然我们成功添加了类名，我们还需要删除之前已经添加的内容，不然只要是点过的地方都会被加上类名。于是我们需要再次进行遍历，第二次遍历同样还是遍历lsit， 但不同的是，我们需要判断当前value的内容是否等于我们当前点击的item内容，如果不等于就代表现在并没有选择这一项，所以我们就需要把active这个类名给删去。

 if (value != item) {
   value.classList.remove("active");
   card[index].classList.remove("active");
}

要注意第二次遍历的变量名不能和第一个重复，这样会导致循环分不清不能进行正确的比较

到这里差不多就已经完成要求了，但是还需要删除DOM结构中的关于颜色的类名，不然提交会显示e2e检测未通过