如何基于URL哈希值在页面中仅显示对应元素？

嘿，这个需求很容易实现，我给你两种靠谱的方案，你可以根据自己的情况选：

方案一：纯CSS实现（推荐，无需JS） #

这个方案最简洁，完全靠CSS的:target伪类就能搞定，适合静态页面：

步骤1：给所有分类p元素加统一容器 #

先把所有50个<p>标签放到一个容器里，这样可以精准控制，不会影响页面其他的<p>元素：

<div id="categories-container">
  <p id='BCI'>Blue_colored_items</p>
  <p id='RCI'>Red_colored_items</p>
  <!-- 剩下的48个分类p标签 -->
</div>

步骤2：添加CSS样式 #

在页面的<head>里加入以下样式：

/* 默认隐藏所有分类p元素 */
#categories-container p {
  display: none;
}

/* 当URL锚点匹配到p的id时，显示该元素 */
#categories-container p:target {
  display: block;
}

如果希望没有锚点时显示所有内容（比如直接访问/categories.html时），可以调整CSS为：

/* 默认显示所有分类 */
#categories-container p {
  display: block;
}

/* 当存在锚点时，隐藏未匹配的元素 */
#categories-container:has(:target) p:not(:target) {
  display: none;
}

注：:has伪类需要现代浏览器支持，目前Chrome、Firefox、Safari都已支持。

方案二：JavaScript实现（适合需要自定义逻辑的场景） #

如果需要更灵活的控制（比如锚点不存在时显示默认提示、监听锚点变化动态更新等），可以用JS实现：

步骤1：同样先加容器（和方案一一样） #

<div id="categories-container">
  <p id='BCI'>Blue_colored_items</p>
  <p id='RCI'>Red_colored_items</p>
  <!-- 其他分类p标签 -->
</div>

步骤2：添加JavaScript代码 #

在页面的<body>末尾加入这段JS：

// 页面加载完成后执行逻辑
window.addEventListener('DOMContentLoaded', function() {
  // 获取URL中的锚点（去掉开头的#）
  const targetId = window.location.hash.slice(1);
  // 获取所有分类p元素
  const allCategories = document.querySelectorAll('#categories-container p');

  // 先隐藏所有分类
  allCategories.forEach(item => {
    item.style.display = 'none';
  });

  // 如果有匹配的锚点，显示对应的分类
  if (targetId) {
    const targetItem = document.getElementById(targetId);
    if (targetItem) {
      targetItem.style.display = 'block';
    } else {
      // 可选：锚点不存在时的处理，比如显示提示
      alert('该分类不存在');
    }
  } else {
    // 可选：没有锚点时显示所有分类
    allCategories.forEach(item => {
      item.style.display = 'block';
    });
  }

  // 可选：监听锚点变化，动态更新显示
  window.addEventListener('hashchange', function() {
    const newTargetId = window.location.hash.slice(1);
    allCategories.forEach(item => {
      item.style.display = 'none';
    });
    if (newTargetId) {
      const newTargetItem = document.getElementById(newTargetId);
      if (newTargetItem) {
        newTargetItem.style.display = 'block';
      }
    }
  });
});

这个方案可以轻松扩展逻辑，比如锚点无效时显示提示，或者用户手动修改URL锚点时自动更新显示内容。

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