如何修改原生JS代码实现点击Green标签显示所有Tab内容

嘿，我来帮你搞定这个需求！要实现点击Green标签时展示所有标签页内容，咱们只需要对原有的Tabs逻辑做一点小调整就行，具体修改如下：

先上修改后的完整代码：

'use strict';
function Tabs() {
  var bindAll = function() {
    var menuElements = document.querySelectorAll('[data-tab]');
    for(var i = 0; i < menuElements.length ; i++) {
      menuElements[i].addEventListener('click', change, false);
    }
  }

  var clear = function() {
    var menuElements = document.querySelectorAll('[data-tab]');
    for(var i = 0; i < menuElements.length ; i++) {
      menuElements[i].classList.remove('active');
      var id = menuElements[i].getAttribute('data-tab');
      document.getElementById(id).classList.remove('active');
    }
  }

  var change = function(e) {
    clear();
    const currentTab = e.currentTarget;
    const tabId = currentTab.getAttribute('data-tab');
    
    // 判断当前点击的是否是Green标签（这里假设它的data-tab值为'green'，根据实际情况替换）
    if (tabId === 'green') {
      // 给Green标签标记为活跃状态
      currentTab.classList.add('active');
      // 获取所有标签内容容器，统一添加active类来显示它们
      const allTabContents = document.querySelectorAll('.tab-content'); // 这里用类选择器更通用，可根据实际DOM结构调整
      allTabContents.forEach(content => content.classList.add('active'));
    } else {
      // 其他标签保持原有逻辑：只显示对应内容
      currentTab.classList.add('active');
      document.getElementById(tabId).classList.add('active');
    }
  }

  bindAll();
}

var connectTabs = new Tabs();

关键修改点说明 #

• 新增Green标签判断逻辑：在点击事件处理函数change里，我们先获取当前标签的data-tab值，判断是否是Green标签对应的标识（这里假设是green，如果你的实际项目里这个值不一样，直接替换成你用的就行）。
• Green标签特殊处理：如果是Green标签，清空所有活跃状态后，给Green标签加上active，同时找到所有标签内容容器，给它们都加上active类，这样所有内容就都显示出来了。
• 保留原有逻辑：其他标签的点击行为和原来完全一致，确保正常的单标签切换功能不受影响。

小提示 #

如果你的标签内容容器不是用.tab-content类标识的，可以换成更适合的选择器，比如如果所有内容容器的ID都是tab-xxx格式，就用document.querySelectorAll('[id^="tab-"]')来选中它们，保证能正确获取到所有内容元素。

内容的提问来源于stack exchange，提问作者Andrew