点击切换列表元素active类时，到达首尾边界如何停止操作？

问题原因 #

当前代码没有做边界判断：当激活的日期已经是列表第一项时，调用prev()拿不到任何元素；已经是最后一项时调用next()也拿不到元素。这时候原有激活项的active类被移除，新的激活项却没加上，就会出现功能异常。

实现方案（同时包含边界拦截+按钮禁用逻辑，体验更流畅） #

1. 修改JavaScript逻辑 #

// 页面加载完成后先初始化按钮状态
updateNavBtnState()

$('#timeline-next').click(function() {
    const $active = $('.timeline-dates div.active')
    const $next = $active.next('div')
    // 只有存在下一个元素时才执行切换
    if ($next.length) {
        $active.removeClass('active')
        $next.addClass('active')
        // 切换完成后更新按钮状态
        updateNavBtnState()
    }
});

$('#timeline-prev').click(function() {
    const $active = $('.timeline-dates div.active')
    const $prev = $active.prev('div')
    // 只有存在上一个元素时才执行切换
    if ($prev.length) {
        $active.removeClass('active')
        $prev.addClass('active')
        // 切换完成后更新按钮状态
        updateNavBtnState()
    }
});

// 通用工具函数：更新前后按钮的禁用状态
function updateNavBtnState() {
    const $active = $('.timeline-dates div.active')
    // 没有上一个元素时禁用prev按钮，否则启用
    $('#timeline-prev').prop('disabled', !$active.prev('div').length)
    // 没有下一个元素时禁用next按钮，否则启用
    $('#timeline-next').prop('disabled', !$active.next('div').length)
}

2. 可选补充：添加按钮禁用状态样式（添加到原有CSS中即可） #

.nav button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

修改完成后，到达列表首尾时对应按钮会自动变成不可点击状态，点击也不会触发切换逻辑，完全避免边界异常问题。

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