点击Next按钮时如何激活下一个li元素？附相关代码片段

Got it, let's work through this to get your Next button working properly. The main issue with your current code is that you're targeting the <ul> element with $selected = $(".steps"), then trying to call .next('li') on it — but that's looking for a sibling <li> of the entire list, not the next <li> inside the list. Here's how to fix it:

Full Working Code #

$(".button-next").click(function(){
    // 找到步骤列表中当前激活的<li>
    const $currentActive = $(".steps li.active");
    // 获取当前激活项的下一个兄弟<li>
    const $next = $currentActive.next("li");

    // 只有当存在下一项时才执行（避免在最后一步继续操作）
    if ($next.length) {
        // 移除当前项的active类
        $currentActive.removeClass("active");
        // 给下一项添加active类
        $next.addClass("active");
    }
});

// 额外补充：给Back按钮也加上功能（既然你已经有这个按钮了）
$(".button-prev").click(function(){
    const $currentActive = $(".steps li.active");
    const $prev = $currentActive.prev("li");

    if ($prev.length) {
        $currentActive.removeClass("active");
        $prev.addClass("active");
    }
});

关键修复点说明 #

• 定位正确的元素: 不再直接选中整个<ul>，而是先找到当前带有active类的<li>——这才是我们操作的起点。
• 边界检查: 通过$next.length判断是否还有下一个步骤项，如果已经是最后一步，就不会执行类的切换操作。
• 切换激活状态: 移除当前项的active类，再给下一项添加上这个类，完成步骤激活状态的转移。

这样每次点击Next按钮，激活状态就会平滑切换到下一个步骤，直到最后一步停止。补充的Back按钮代码则实现了反向切换的功能，点击可以回到上一个步骤（如果存在的话）。

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