如何用jQuery基于目标元素聚焦设置导航链接的active类？

你只需要给所有.section元素绑定focus事件，当div获得焦点时，自动匹配对应的导航链接并切换active类，具体实现如下：

新增核心逻辑 #

在现有脚本末尾添加这段代码：

// 监听section的聚焦事件，同步导航active状态
$(".carousel .content .section").on('focus', function() {
    // 获取当前聚焦div的id
    const targetId = '#' + $(this).attr('id');
    // 移除所有导航链接的active类
    $(".carousel nav a.active").removeClass("active");
    // 找到对应href的导航链接并添加active类
    $(`.carousel nav a[href="${targetId}"]`).addClass("active");
});

补充说明 #

• 这段代码会在任何.section元素获得焦点时触发，包括Tab键切换、移动端滑动聚焦，或者点击导航时的target.focus()操作
• 原有点击事件的逻辑可以简化，因为点击导航触发target.focus()后，上面的聚焦逻辑会自动给对应导航链接加active类，简化后的点击事件代码如下：

$(".carousel nav a").click(function (event) {
    event.preventDefault(); 
    var target = $($(this).attr('href'));
    target.focus();
});

• 如果你的滑动切换插件不会自动给目标div设置焦点，可以在滑动完成的回调里手动调用$(target).focus()，确保导航状态能同步

修改后的完整脚本 #

$('.carousel nav ul li').each(function(i, e) {
    $(this).wrapInner($('<a>', {
        "href": "#" + "slide-" + i
    }));
});

$(".carousel .content .section").each(function(i, e) {
    $(this).attr("id", "slide-" + i).addClass("collapsed").attr("tabindex","0");
});

$(".carousel nav ul li a").eq(0).addClass("active");

$(".carousel nav a").click(function (event) {
    event.preventDefault(); 
    var target = $($(this).attr('href'));
    target.focus();
});

// 新增的聚焦同步逻辑
$(".carousel .content .section").on('focus', function() {
    const targetId = '#' + $(this).attr('id');
    $(".carousel nav a.active").removeClass("active");
    $(`.carousel nav a[href="${targetId}"]`).addClass("active");
});

这样不管是通过点击导航、Tab键切换还是滑动到div，导航的active状态都会和当前聚焦的div保持同步，完美适配键盘和移动端用户的操作。

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