JavaScript 点击事件切换内容:实现步骤导航功能
申请使用以下的代码来实现点击事件触发切换功能:
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 == "最优税费测算") {
hsDetails.style.display = 'none';
taxCalculator.style.display = 'block';
costEstimates.style.display = 'none';
optimalImportCountry.style.display = 'none';
} else if (name == "到岸成本预估") {
hsDetails.style.display = 'none';
taxCalculator.style.display = 'none';
costEstimates.style.display = 'block';
optimalImportCountry.style.display = 'none';
} else if (name == "最优进口国选择") {
hsDetails.style.display = 'none';
taxCalculator.style.display = 'none';
costEstimates.style.display = 'none';
optimalImportCountry.style.display = 'block';
}
}
请保证在HTML中将对应的元素ID设置为hsDetails、taxCalculator、costEstimates和optimalImportCountry。另外,checkLogin()函数需要根据你的需求自行实现。
原文地址: https://www.cveoy.top/t/topic/qkvm 著作权归作者所有。请勿转载和采集!