如何实现点击锚点标签依次显示下一个并隐藏当前标签？

你可以通过通用化的JavaScript函数实现这种顺序切换需求，避免为每个按钮编写重复代码，具体修改如下：

修改后的HTML代码 #

<a href="javascript:void(0)" id="btn0" onclick="showNextBtn(0)" class="w-auto rounded-pill bg-transparent border px-3 py-2 text-decoration-none text-reset suggestion"><?php print(strval($suggestions[0])); ?></a>
<a href="javascript:void(0)" id="btn1" style="display:none" class="w-auto rounded-pill bg-transparent border px-3 py-2 text-decoration-none text-reset suggestion"><?php print(strval($suggestions[1])); ?></a>
<a href="javascript:void(0)" id="btn2" style="display:none" class="w-auto rounded-pill bg-transparent border px-3 py-2 text-decoration-none text-reset suggestion"><?php print(strval($suggestions[2])); ?></a>
<a href="javascript:void(0)" id="btn3" style="display:none" class="w-auto rounded-pill bg-transparent border px-3 py-2 text-decoration-none text-reset suggestion"><?php print(strval($suggestions[3])); ?></a>
<a href="javascript:void(0)" id="btn4" style="display:none" class="w-auto rounded-pill bg-transparent border px-3 py-2 text-decoration-none text-reset suggestion"><?php print(strval($suggestions[4])); ?></a>

修改后的JavaScript代码 #

function showNextBtn(currentIndex) {
    // 获取当前按钮元素
    const currentBtn = document.getElementById(`btn${currentIndex}`);
    const nextIndex = currentIndex + 1;
    
    // 边界判断：如果是最后一个按钮，直接终止逻辑
    if (nextIndex > 4) return;
    
    // 获取下一个按钮元素
    const nextBtn = document.getElementById(`btn${nextIndex}`);
    
    // 执行切换：隐藏当前按钮，显示下一个按钮
    currentBtn.style.display = 'none';
    nextBtn.style.display = 'initial';
}

核心优化说明 #

• 通用逻辑复用：通过传递当前按钮的索引值，单个函数即可处理所有按钮的点击事件，无需编写多个重复的showBtnX()函数。
• 边界防护：加入nextIndex > 4的判断，避免点击最后一个按钮时因找不到后续元素报错。
• 逻辑简化：去掉冗余的多元素隐藏判断，直接执行"隐藏自身+显示下一个"的核心逻辑，完全匹配需求。

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