jQuery :target 选择器（保姆级教程）

什么是 jQuery :target 选择器？它能帮你实现什么？

在前端开发中，我们经常需要根据页面的当前状态来动态调整样式或执行某些逻辑。比如，点击一个链接后，页面跳转到某个锚点位置，这时我们希望该目标区域能自动高亮或展开。这正是 jQuery :target 选择器的用武之地。

想象一下你正在翻阅一本电子书，点击目录中的某个章节，书页会自动跳转到对应位置。而你希望这个章节的标题能“闪一下”或者背景变色，提醒你已经到达目标位置。这就是 :target 选择器在做的事——它能精准地找到当前 URL 中的锚点（hash）所指向的元素，并对它进行样式或行为上的处理。

这个选择器属于 CSS3 的伪类，但在 jQuery 中可以通过 :target 语法直接使用。它不依赖 JavaScript 事件，而是基于 URL 的变化自动生效，是一种非常优雅的“无侵入式”交互方式。

注意：jQuery :target 选择器 并不是 jQuery 自己发明的，而是基于原生 CSS 的 :target 伪类封装而来。jQuery 让它更容易在复杂 DOM 操作中使用。

如何使用 jQuery :target 选择器？

使用 jQuery :target 选择器非常简单，只需要在选择器中写上 :target 即可。例如：

// 选中当前 URL 中 hash 所指向的元素
$('div:target')

这段代码的意思是：“找到页面中 id 与当前 URL hash 值匹配的 div 元素”。比如，当 URL 是 https://example.com/page.html#section2 时，如果存在一个 id="section2" 的 div，那么这个 div 就会被选中。

我们来做一个完整的例子：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>jQuery :target 选择器示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* 默认样式：所有 section 都是隐藏的 */
    section {
      display: none;
      padding: 20px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    /* 当元素被 :target 选中时，显示并高亮 */
    section:target {
      display: block;
      background-color: #f0f8ff;
      border-color: #007cba;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <nav>
    <a href="#section1">第 1 节</a> |
    <a href="#section2">第 2 节</a> |
    <a href="#section3">第 3 节</a>
  </nav>

  <section id="section1">
    <h3>这是第一部分内容</h3>
    <p>这里是关于第一个主题的详细说明。</p>
  </section>

  <section id="section2">
    <h3>这是第二部分内容</h3>
    <p>这里是关于第二个主题的详细说明。</p>
  </section>

  <section id="section3">
    <h3>这是第三部分内容</h3>
    <p>这里是关于第三个主题的详细说明。</p>
  </section>

  <script>
    // 当页面加载完成后，检查当前是否有 target 元素
    $(document).ready(function () {
      // 使用 jQuery :target 选择器获取当前目标元素
      const $target = $('section:target');

      // 如果有目标元素，可以执行一些额外操作
      if ($target.length > 0) {
        console.log('当前目标元素是：', $target.attr('id'));
        
        // 可以添加动画或滚动到目标位置
        $('html, body').animate({
          scrollTop: $target.offset().top - 100
        }, 500);
      }
    });
  </script>

</body>
</html>

代码解析说明：

section:target 是核心选择器，它会自动匹配当前 URL 中 hash 对应的 id。
我们在 CSS 中设置了 display: none，只有被 :target 选中时才显示，实现“按需显示”。
JavaScript 部分在页面加载后判断是否存在目标元素，并自动滚动到该位置，提升用户体验。
scrollTop 的偏移量 -100 是为了让目标内容顶部留出一点空白，避免被导航栏遮挡。

jQuery :target 选择器的适用场景

这个选择器虽然功能单一，但应用场景非常广泛，尤其适合以下几种情况：

1. 侧边导航栏联动内容显示

在文档网站、API 文档或帮助中心中，常见“左侧导航 → 右侧内容”的联动结构。使用 :target 可以让点击导航后，内容自动切换并高亮，无需写复杂的事件监听。

2. 手动跳转的锚点导航

比如一个“返回顶部”按钮，点击后跳转到页面顶部的 id="top" 元素，此时你就可以用 :target 来为这个元素添加“已到达”的视觉反馈。

3. 多步骤表单或向导页

在分步引导页中，每一步对应一个 hash，通过 :target 可以自动激活当前步骤的样式，无需手动维护状态。

4. 帮助文档或 FAQ 页面

用户点击“跳转到问题 3”，页面自动滚动并高亮该问题区域，增强可读性和导航体验。

与传统事件监听相比的优势

很多人第一反应是：“我可以用 click 事件监听来实现啊！” 确实，这也可以做到。但对比一下两种方式的差异：

特性	jQuery :target 选择器	`click` 事件监听
是否依赖 JavaScript 事件	否，基于 URL hash 变化	是，必须绑定事件
是否支持浏览器后退按钮	是，自动响应	否，需手动处理 history
代码简洁性	极简，一行代码搞定	需要注册事件、更新状态
是否支持书签保存	是，hash 可被保存	一般不可直接通过 URL 保存状态
是否支持刷新页面后仍保持状态	是	否，除非手动恢复

从表格中可以看出，jQuery :target 选择器 在“无状态”、“可书签”、“支持历史”方面具有天然优势。它更像是“让浏览器自己管理状态”，而不是“前端代码强行控制”。

常见误区与注意事项

虽然 :target 很方便，但也有一些容易踩坑的地方：

1. 必须有正确的 id 匹配

section:target 只能匹配 id 与 hash 完全一致的元素。比如：

<a href="#section1">跳转</a>
<section id="section1">...</section>

如果写成 id="Section1" 或 id="section_1"，就无法匹配。

2. hash 必须以 `#` 开头

URL 必须是 #section1 而不是 section1。否则 :target 无法识别。

3. 不支持 `class` 或 `name` 属性

:target 只能通过 id 匹配，不能通过 class 或 name 属性。比如：

<div class="target-section">不会被 :target 选中</div>

即使你用 $('.target-section:target') 也不会生效。

4. 仅在 hash 改变时触发

只有当 URL 的 hash 发生变化时（如点击链接或手动修改地址栏），:target 才会重新判断。如果程序中用 JS 修改了 window.location.hash，也要确保 DOM 已更新。

实战案例：动态高亮导航栏

我们来做一个更完整的案例：当用户跳转到某个 section 时，自动高亮对应的导航链接。

<nav>
  <a href="#section1" class="nav-link">第 1 节</a>
  <a href="#section2" class="nav-link">第 2 节</a>
  <a href="#section3" class="nav-link">第 3 节</a>
</nav>

<section id="section1">...</section>
<section id="section2">...</section>
<section id="section3">...</section>

$(document).ready(function () {
  // 定义一个函数，用于更新导航高亮
  function updateNavHighlight() {
    // 清除所有导航项的 active 类
    $('.nav-link').removeClass('active');

    // 找到当前的 target 元素
    const $target = $('section:target');

    // 如果有 target，找到对应的导航链接并添加 active
    if ($target.length > 0) {
      const targetId = $target.attr('id');
      const $navLink = $(`a[href="#${targetId}"]`);
      $navLink.addClass('active');
    }
  }

  // 页面加载时执行一次
  updateNavHighlight();

  // 监听 hash 变化事件
  $(window).on('hashchange', updateNavHighlight);
});

关键点说明：

hashchange 事件是浏览器原生支持的，当 URL hash 改变时自动触发。
我们在 updateNavHighlight 中使用 $('section:target') 来获取当前目标。
通过 attr('id') 获取 ID，再用选择器定位对应的导航链接。
每次 hash 变化都自动更新导航状态，无需手动维护。

总结与建议

jQuery :target 选择器 是一个强大而轻量的工具，它让前端开发者可以更自然地利用浏览器的 URL 状态机制，实现“无状态管理”的交互效果。尤其适合文档类、导航类、向导类应用。

它的最大优势在于：不依赖事件监听，不强制写状态逻辑，完全由浏览器驱动。这不仅减少了代码量，也提高了可维护性和用户体验。

如果你正在开发一个内容丰富的网页，或者希望实现“点击跳转 → 自动高亮 → 支持书签”的完整流程，那么 jQuery :target 选择器 绝对值得你尝试。

最后提醒一点：虽然它强大，但不要滥用。它适合“基于锚点的跳转”场景，不适合复杂的交互逻辑。在需要大量状态控制的项目中，建议结合 state 或 history API 使用。

掌握这个技巧，你就能让页面“自己知道”用户在哪里，而不是靠代码硬推。这才是真正的“智能前端”。