点击首页锚点跳转至服务页后高亮对应DIV的实现问题

安全阿岳

2026-7-21

解决方案

步骤1：修改首页锚点链接，传递目标标识

给每个首页锚点的跳转URL加上target参数，明确标记要高亮的服务页DIV：

<!-- 首页的10个锚点示例 -->
<a href="/services/?target=anchor1">服务1</a>
<a href="/services/?target=anchor2">服务2</a>
<!-- ... 其他8个锚点以此类推，target值对应服务页DIV的ID -->

步骤2：服务页实现高亮逻辑

服务页通过URL参数获取目标DIV，用CSS类控制高亮效果，5秒后自动移除：

服务页HTML（对应DIV示例）

<div id="anchor1" class="service-item">服务内容1</div>
<div id="anchor2" class="service-item">服务内容2</div>
<!-- ... 其他8个服务DIV -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

服务页CSS（定义高亮样式）

.highlight {
  background-color: yellow;
  /* 可选：添加过渡动画让高亮更平滑 */
  transition: background-color 0.3s ease;
}

服务页JS逻辑

$(document).ready(function() {
  // 解析URL中的target参数
  const urlParams = new URLSearchParams(window.location.search);
  const targetId = urlParams.get('target');
  
  if (targetId) {
    const $targetDiv = $('#' + targetId);
    if ($targetDiv.length) {
      // 添加高亮类
      $targetDiv.addClass('highlight');
      // 5秒后移除高亮类
      setTimeout(() => {
        $targetDiv.removeClass('highlight');
      }, 5000);
    }
  }
});