如何在btn-buy2 gecmis类元素激活时为my-head-right-item1类div添加active类

实现方案 #

你可以通过原生JavaScript或者jQuery来实现这个需求，两种方案的代码如下：

方案1：原生JavaScript实现 #

首先监听按钮的点击事件，每次点击后判断带btn-buy2 gecmis类的元素是否含有active类，再对应控制目标div的类名即可：

// 先获取需要用到的两个元素
const gecmisBtn = document.querySelector('.btn-buy2.gecmis')
const targetItem = document.querySelector('.my-head-right-item1')
// 监听所有tab按钮的点击事件，做类名同步
document.querySelectorAll('.btn-buy2').forEach(btn => {
  btn.addEventListener('click', function() {
    // 先移除所有按钮的active类，模拟tab切换逻辑（如果你本身已经有切换逻辑可以删掉这步）
    document.querySelectorAll('.btn-buy2').forEach(b => b.classList.remove('active'))
    this.classList.add('active')
    // 判断gecmis按钮是否处于激活状态，同步目标元素类名
    if(gecmisBtn.classList.contains('active')) {
      targetItem.classList.add('active')
    } else {
      targetItem.classList.remove('active')
    }
  })
})
// 页面初始化的时候执行一次判断，避免刷新后状态不同步
if(gecmisBtn.classList.contains('active')) {
  targetItem.classList.add('active')
}

如果你的tab是通过URL hash切换的，还需要额外监听hashchange事件，在hash变化时重新执行状态判断逻辑。

方案2：jQuery实现 #

如果项目已经引入了jQuery，可以用更简洁的写法：

// 页面加载完成后执行
$(function() {
  // 初始化状态同步
  if($('.btn-buy2.gecmis').hasClass('active')) {
    $('.my-head-right-item1').addClass('active')
  }
  // 监听tab按钮点击
  $('.btn-buy2').click(function() {
    // 切换按钮active类（如果已有切换逻辑可省略）
    $('.btn-buy2').removeClass('active')
    $(this).addClass('active')
    // 同步目标元素类名
    if($('.btn-buy2.gecmis').hasClass('active')) {
      $('.my-head-right-item1').addClass('active')
    } else {
      $('.my-head-right-item1').removeClass('active')
    }
  })
})

补充说明 #

如果你的tab切换本身已经有其他逻辑控制active类的增减，只需要保留类名判断的逻辑，插入到你现有切换逻辑的末尾即可，不需要重复写切换按钮active类的代码。

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