带tabindex的div内锚点点击无法触发:focus，隐藏div不显示

问题分析 #

你遇到的核心问题是：点击.pop_gpx_text内的锚点时，浏览器会自动将焦点转移到锚点元素上，导致父级的.pop_gpx_text失去焦点，因此:focus伪类无法触发相邻的#hidden_div显示。而在测试的示例环境中，锚点没有实际跳转行为或焦点被特殊处理，所以父div能维持焦点状态。

解决方案 #

方案1：使用:focus-within伪类（推荐）

直接替换CSS中的:focus为:focus-within，这个伪类会在元素本身或其子元素获得焦点时生效，完美匹配你的需求，无需额外JS：

.pop_gpx_text:focus-within + #hidden_div {
  display: block;
}

优点：代码简洁，原生CSS实现，无需JS干预；现代浏览器（Chrome、Firefox、Edge、Safari 10.1+）都支持。

方案2：通过JS手动维持父div焦点

如果需要兼容更老的浏览器，可以给锚点添加点击事件，阻止默认焦点转移，并手动让父div重新获取焦点：

// 给所有.pop_gpx_text内的锚点绑定事件
document.querySelectorAll('.pop_gpx_text a').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止锚点默认的焦点跳转行为
    e.preventDefault();
    // 手动让父div获取焦点
    this.closest('.pop_gpx_text').focus();
    // 如果需要实现锚点跳转，在这里手动处理：
    // window.location.href = this.href;
  });
});

优点：兼容性更好，覆盖老版本浏览器；缺点是需要编写额外JS代码。

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