申请使用以下的代码来实现点击事件触发切换功能:

const steps = document.querySelectorAll('.step');

 steps.forEach(step => {
  step.addEventListener('click', () => {
    if (step.innerHTML != "HSCODE") {
      checkLogin();
    }
    steps.forEach(step => step.classList.remove('active'));
    step.classList.add('active');
    switchStep($(".active").text());
  });
});

function switchStep(name) {
  const hsDetails = document.getElementById('hsDetails');
  const taxCalculator = document.getElementById('taxCalculator');
  const costEstimates = document.getElementById('costEstimates');
  const optimalImportCountry = document.getElementById('optimalImportCountry');

  if (name == "HSCODE") {
    hsDetails.style.display = 'block';
    taxCalculator.style.display = 'none';
    costEstimates.style.display = 'none';
    optimalImportCountry.style.display = 'none';
  } else if (name == "最优税费测&#x7b97") {
    hsDetails.style.display = 'none';
    taxCalculator.style.display = 'block';
    costEstimates.style.display = 'none';
    optimalImportCountry.style.display = 'none';
  } else if (name == "到岸成本预&#x4f30") {
    hsDetails.style.display = 'none';
    taxCalculator.style.display = 'none';
    costEstimates.style.display = 'block';
    optimalImportCountry.style.display = 'none';
  } else if (name == "最优进口国选&#x62e9") {
    hsDetails.style.display = 'none';
    taxCalculator.style.display = 'none';
    costEstimates.style.display = 'none';
    optimalImportCountry.style.display = 'block';
  }
}

请保证在HTML中将对应的元素ID设置为hsDetailstaxCalculatorcostEstimatesoptimalImportCountry。另外,checkLogin()函数需要根据你的需求自行实现。

JavaScript 点击事件切换内容:实现步骤导航功能

原文地址: https://www.cveoy.top/t/topic/qkvm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录