点击移动端滑动导航项内容不切换的JS与PHP问题修复求助

问题根因 #

移动端导航失效由两个问题共同导致：

• 移动端导航项的<a>标签缺失和桌面端一致的锚点href属性，无法关联到下方对应ID的tab内容
• 现有滑动组件JS只实现了导航滑块的切换逻辑，没有同步触发下方tab内容切换的逻辑

修复步骤 #

第一步：修改PHP代码补全锚点属性 #

找到PHP代码中移动端导航的渲染部分，把空的<a>标签补充href属性：

<!-- 原有代码 -->
<div class="phonenav__blue__slide tab">
    <a><?php echo $title ?></a>
</div>

<!-- 修改后代码 -->
<div class="phonenav__blue__slide tab">
    <a href="#tab-<?php echo $key; ?>"><?php echo $title ?></a>
</div>

修改后移动端导航项就和桌面端一样，带有对应tab内容的锚点标识。

第二步：补充JS逻辑实现内容同步切换 #

如果项目原有tab切换逻辑是监听带href锚点的.tab a点击事件触发，补全锚点后功能就会直接生效。如果没有生效，可以在现有滑动JS中补充同步切换内容的逻辑，同时优化冗余代码：

if (document.getElementsByClassName("phonenav__blue__slide").length) {
    var slideIndex = 1;
    phonenavshowSlides(slideIndex);
    // 删掉重复的phonenavshowSlides(slideIndex)调用

    function phonenavplusSlides(n) {
        phonenavshowSlides(slideIndex += n);
    }

    function currentSlide(n) {
        phonenavshowSlides(slideIndex = n);
    }

    function phonenavshowSlides(n) {
        var i;
        var slides = document.getElementsByClassName("phonenav__blue__slide");
        var tabItems = document.querySelectorAll(".accordion-tabs .tab-item");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
            // 同步隐藏所有tab内容
            tabItems[i].classList.remove("active");
        }
        slides[slideIndex - 1].style.display = "block";
        // 同步展示对应索引的tab内容
        tabItems[slideIndex - 1].classList.add("active");
    }

    // 绑定移动端导航项点击切换事件
    document.querySelectorAll(".phonenav__blue__slide a").forEach(function(el, index) {
        el.addEventListener("click", function(e) {
            e.preventDefault();
            currentSlide(index + 1);
        })
    })
}

第三步：测试验证 #

修改完成后测试两个场景：

• 点击移动端导航项，是否能正常切换到对应内容
• 点击导航左右滑动箭头切换滑块时，下方内容是否同步切换对应索引的内容

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