异常教程

jQuery :target 选择器（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，如何实现页面元素的动态交互始终是一个核心问题。随着单页应用（SPA）和响应式设计的普及，开发者对精准控制页面元素的需求日益增长。jQuery :target 选择器正是这样一个强大而易用的工具，它通过结合浏览器的锚点定位功能，帮助开发者快速实现元素的高亮显示、内容切换等效果。无论是构建导航菜单、模态框，还是优化无障碍访问，这一选择器都能提供简洁高效的解决方案。本文将从基础概念、工作原理、实战案例到注意事项，系统讲解如何掌握并灵活运用这一技术。

基础概念：什么是 :target 选择器？

原生 CSS 的锚点定位

在讨论 jQuery 的 :target 选择器之前，我们需要先了解它的“原生版本”——CSS 的 :target 伪类选择器。
:target 是 CSS3 引入的一个伪类，用于匹配当前 URL 中被锚点（#）指向的元素。例如，当 URL 为 https://example.com/page#section2 时，页面中 ID 为 section2 的元素会触发 :target 的样式规则。

形象比喻：
可以将 :target 想象为网页中的“导航员”。当用户通过链接跳转到某个锚点时，这个导航员会自动找到对应的元素，并为其点亮“高亮标记”，开发者可以通过 CSS 自定义这个标记的样式。

jQuery 的扩展能力

虽然原生 :target 已经足够强大，但结合 jQuery 可以解锁更多可能性。通过 jQuery 选择器，开发者可以更灵活地操作 :target 元素，例如：

  • 在元素被选中时动态添加类名或执行函数
  • 结合动画、事件监听实现复杂交互
  • 处理多元素锚点的联动效果

语法示例：

// 选择当前被锚点激活的元素  
$(document).ready(function() {  
  $(":target").addClass("highlight");  
});

工作原理：锚点定位与浏览器行为

锚点的触发机制

:target 选择器的触发依赖浏览器的 URL 变化。具体流程如下：

  1. 用户点击带有 href="#element_id" 的链接
  2. 浏览器将 URL 的 hash 部分更新为 #element_id
  3. 页面滚动到对应元素的位置（默认行为）
  4. 触发 :target 选择器，应用对应的样式或执行 jQuery 代码

关键点：

  • 锚点元素必须有 id 属性，且与 URL 中的 # 后内容完全一致。
  • 如果页面中存在多个锚点，只有当前 URL 对应的那个元素会触发 :target。

jQuery 的事件监听优化

原生 :target 的样式变化是“被动”的，开发者无法直接监听其状态变化。通过 jQuery，可以借助 hashchange 事件实现主动响应：

$(window).on("hashchange", function() {  
  const targetId = window.location.hash.slice(1);  
  $("#" + targetId).fadeIn(); // 仅示例，具体逻辑需根据需求调整  
});

这一方法允许开发者在锚点变化时执行自定义代码，例如加载动态内容或触发动画。

实战案例：从简单到复杂的应用场景

案例 1：单页导航高亮

需求：在单页网站中，当用户点击导航链接跳转到锚点时，对应的导航项自动高亮。

实现步骤：

  1. HTML 结构：
<nav>  
  <a href="#section1">章节 1</a>  
  <a href="#section2">章节 2</a>  
</nav>  

<div id="section1">内容 1</div>  
<div id="section2">内容 2</div>
  1. CSS 样式：
nav a.active {  
  color: red;  
  font-weight: bold;  
}
  1. jQuery 逻辑：
$(document).ready(function() {  
  // 初始化高亮当前锚点对应的导航项  
  const currentHash = window.location.hash;  
  if (currentHash) {  
    $(`nav a[href="${currentHash}"]`).addClass("active");  
  }  

  // 监听 hash 变化事件  
  $(window).on("hashchange", function() {  
    // 移除所有 active 类  
    $("nav a").removeClass("active");  
    // 添加新 active 类  
    const newHash = window.location.hash;  
    $(`nav a[href="${newHash}"]`).addClass("active");  
  });  
});

效果：导航链接在对应章节被访问时自动变色，帮助用户明确当前位置。

案例 2：模态框的动态显示

需求：点击按钮时弹出模态框，并通过锚点实现“返回模态框”的链接。

实现步骤：

  1. HTML 结构：
<button id="open-modal">打开模态框</button>  

<!-- 模态框容器 -->  
<div id="modal" class="modal">  
  <div class="modal-content">  
    <p>这里是模态框内容</p>  
    <a href="#modal">返回顶部</a>  
  </div>  
</div>
  1. CSS 样式：
.modal {  
  display: none;  
  position: fixed;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  background: white;  
  padding: 20px;  
  border: 1px solid #ccc;  
}  

/* 当锚点指向 #modal 时显示模态框 */  
#modal:target {  
  display: block;  
}
  1. jQuery 逻辑：
$(document).ready(function() {  
  // 点击按钮时触发锚点  
  $("#open-modal").click(function() {  
    window.location.hash = "modal";  
  });  

  // 关闭模态框（例如点击遮罩层）  
  $(".modal").click(function(e) {  
    if (e.target === this) {  
      window.location.hash = ""; // 移除锚点  
    }  
  });  
});

效果：通过结合锚点和 jQuery 事件，模态框的显示/隐藏与 URL 状态同步，方便用户通过浏览器历史记录返回。

案例 3：无障碍跳转增强

需求：为长页面添加“跳转到顶部”按钮，并确保键盘用户也能方便使用。

实现步骤：

  1. HTML 结构：
<!-- 页面内容区域，假设高度较大 -->  
<div id="content">...</div>  

<!-- 锚点标记顶部位置 -->  
<a id="top"></a>  

<!-- 跳转按钮 -->  
<button id="go-top">回到顶部</button>
  1. jQuery 逻辑：
$(document).ready(function() {  
  // 点击按钮时触发锚点跳转  
  $("#go-top").click(function() {  
    // 平滑滚动到顶部锚点  
    $("html, body").animate({  
      scrollTop: $("#top").offset().top  
    }, 500);  

    // 更新 URL 锚点，方便键盘用户直接访问  
    window.location.hash = "top";  
  });  

  // 当锚点为 #top 时，自动显示按钮  
  if (window.location.hash === "#top") {  
    $("#go-top").focus(); // 将焦点移至按钮  
  }  
});

效果：按钮不仅触发跳转，还通过锚点维护了页面状态，提升无障碍访问体验。

进阶技巧与注意事项

技巧 1：与 CSS 动画结合

通过 :target 和 transition，可以实现无需 JavaScript 的简单动画：

.box {  
  width: 100px;  
  height: 100px;  
  background: blue;  
  transition: all 0.5s ease;  
}  

.box:target {  
  transform: scale(1.2);  
  background: red;  
}

但若需要更复杂的逻辑（如循环动画），则需结合 jQuery：

$("#target-element").on("click", function() {  
  $(this).animate({  
    opacity: 0.5  
  }, 500).delay(500).animate({  
    opacity: 1  
  }, 500);  
});

技巧 2：处理多级锚点嵌套

当页面存在多级锚点时，可以通过 window.location.hash 解析层级关系：

$(window).on("hashchange", function() {  
  const path = window.location.hash.slice(1).split("/");  
  const section = path[0];  
  const subsection = path[1];  

  // 根据路径展开对应的子内容区域  
  $("#" + section).find("#" + subsection).slideDown();  
});

注意事项

  1. 浏览器兼容性：

    • :target 在现代浏览器中普遍支持，但需注意 IE8 及以下版本不兼容。
    • 使用 jQuery 的 hashchange 事件时，需为旧版浏览器（如 IE8）添加 polyfill。

  2. 性能优化：

    • 频繁触发锚点跳转可能导致滚动抖动，可通过 preventDefault() 或 setTimeout() 延迟处理。
    • 对于大量锚点的页面，建议使用虚拟滚动或分页技术。

  3. 与 CSS 结合的陷阱：

    • 避免在 :target 样式中使用 display: none，这可能干扰浏览器的默认滚动行为。
    • 若需隐藏元素，建议使用 opacity: 0 或 visibility: hidden。

结论

jQuery :target 选择器是一个将浏览器原生功能与前端交互结合的典范。通过理解其工作原理并合理运用，开发者可以实现从简单的导航高亮到复杂的模态框交互等多样化需求。无论是优化用户体验、提升无障碍访问，还是简化代码逻辑，这一选择器都提供了高效且优雅的解决方案。

掌握 :target 的关键在于：

  1. 熟悉 URL 锚点与元素 ID 的对应关系
  2. 结合 jQuery 实现动态交互逻辑
  3. 通过 CSS 强化视觉反馈

未来，随着 Web 组件化和框架技术的发展，<a> 标签和锚点定位仍将在单页应用和响应式设计中扮演重要角色。建议读者通过本文提供的案例代码进行实践，并尝试将其应用到实际项目中，逐步探索更多可能性。

注：本文内容基于 jQuery 3.x 版本和现代浏览器环境，如需适配旧版浏览器，需额外添加兼容处理。

最新发布

查看更多文章