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) {
        if (name == 'HSCODE') {
            $('#hsDetails').show();
            $('#taxCalculator').hide();
            $('#costEstimates').hide();
            $('#optimalImportCountry').hide();
        } else if (name == '最优税费测算') {
            $('#hsDetails').hide();
            $('#taxCalculator').show();
            $('#costEstimates').hide();
            $('#optimalImportCountry').hide();
        } else if (name == '到岸成本预估') {
            $('#hsDetails').hide();
            $('#taxCalculator').hide();
            $('#costEstimates').show();
            $('#optimalImportCountry').hide();
        } else if (name == '最优进口国选择') {
            $('#hsDetails').hide();
            $('#taxCalculator').hide();
            $('#costEstimates').hide();
            $('#optimalImportCountry').show();
        }
    }

当点击某个步骤时，会触发点击事件，调用jumpTaxCalculator()函数。该函数中首先获取所有具有类名为step的元素，并将其存储在steps变量中。

接下来，对于每个步骤元素，添加点击事件监听器。当点击某个步骤时，会执行回调函数。在回调函数中，首先检查被点击的步骤的内容是否为'HSCODE'，如果不是，则调用checkLogin()函数。

然后，将所有步骤元素的active类移除，再将被点击的步骤元素添加active类。最后，根据被点击的步骤的内容，调用switchStep()函数进行页面切换。

在switchStep()函数中，根据传入的步骤名称，通过判断语句切换不同的页面显示。如果步骤名称为'HSCODE'，则显示hsDetails元素，隐藏其他页面元素。如果步骤名称为'最优税费测算'，则显示taxCalculator元素，隐藏其他页面元素。如果步骤名称为'到岸成本预估'，则显示costEstimates元素，隐藏其他页面元素。如果步骤名称为'最优进口国选择'，则显示optimalImportCountry元素，隐藏其他页面元素。

通过这样的切换，可以根据点击的步骤显示对应的页面内容。

优化建议

• 可以使用更具描述性的类名，例如将active类改为step-active，更清晰地表明该类与步骤元素有关。
• 可以使用事件委托，将点击事件监听器添加到父元素上，减少事件监听器的数量，提高性能。
• 可以使用CSS动画或过渡效果，使页面切换更加平滑，提升用户体验。
• 可以根据实际情况，将代码进行模块化封装，提高代码的可读性和可维护性。