带缩略图的图片查看器：点击缩略图后无法重新聚焦求助

问题根源 #

代码逻辑上已经为目标标签添加了focused类并调用.focus()，但视觉上无聚焦效果，问题出在两点：

修复后的点击事件代码 #

// 点击切换缩略图逻辑
$('.clickable').click(function (e) {
    // 阻止a标签默认跳转，避免焦点丢失
    e.preventDefault();
    
    // 清除所有缩略图的聚焦标记
    $('.focused').removeClass('focused');
    
    // 给当前点击的缩略图容器设置聚焦状态
    $(this).addClass('focused').focus();
    
    // 更新大图显示
    const clickSrc = $(this).find('img').attr('src');
    $('.figure img').attr('src', clickSrc);
})

额外优化点 #

1. 修复Razor循环重复渲染问题：原循环会把第一张图输出两次，修正后：

<div class="DocumentList col-xs-12 d-inline-block">
    @{
        bool first = true;
        foreach (ImageModel image in Model.images)
        {
            string base64String = "data:image/png;base64," + Convert.ToBase64String(image.Data, 0, image.Data.Length);
            
            if (first)
            {
                <a href='#' class="focusable focused clickable d-inline-block"><img class="imageSelect" src="@base64String" /></a>
                first = false;
            }
            else
            {
                <a href='#' class="focusable clickable d-inline-block"><img src="@base64String" /></a>
            }
        }
    }
</div>

2. 确保聚焦样式可见：检查CSS是否包含:focus伪类样式，比如：

.focusable:focus, .focused {
    outline: 2px solid #007bff;
    border-radius: 4px;
}

修复逻辑说明 #

• 将点击事件绑定到<a>标签本身，而非内部img，避免浏览器自动把焦点给到img
• 用e.preventDefault()阻止a标签的默认跳转行为，防止页面滚动导致焦点丢失
• 简化代码逻辑，去掉冗余的.focus()调用和不必要的addClass('focusable')操作
• 保持focused类和:focus伪类样式一致，确保聚焦状态的视觉表现统一

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