如何用jQuery等工具实现父元素挖空子元素（类似AI/PS减切）作活跃页标识

嘿，这个需求我太懂了！你想要的就是在不透明的父元素（比如导航栏）里，做出一个能穿透显示body背景的三角形指示器——就像在Illustrator/Photoshop里给父图层「减去」一个三角形区域，让下面的body背景透出来，用来标记当前活跃页面，对吧？

好消息是，CSS现在完全能搞定这个效果，不需要依赖jQuery（当然如果需要动态定位的话，JS可以帮你锦上添花）。我给你两种可行的方案：

方案1：纯CSS固定位置指示器（适合单活跃项居中的场景） #

用clip-path属性直接给父元素“挖”出一个三角形缺口——这就像在PS里用路径工具裁剪图层，缺口处会自动透出下面的body背景。

完整代码示例： #

<nav class="main-nav">
  <a href="#" class="nav-link">首页</a>
  <a href="#" class="nav-link active">关于</a>
  <a href="#" class="nav-link">联系我们</a>
</nav>

/* 给body加个渐变背景，方便看穿透效果 */
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.main-nav {
  background: #2c3e50; /* 父元素不透明背景 */
  padding: 1rem 2rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  /* 关键：用clip-path裁剪出底部中间的三角形缺口 */
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 12px), 
    calc(50% + 12px) calc(100% - 12px), 
    50% 100%, 
    calc(50% - 12px) calc(100% - 12px), 
    0 calc(100% - 12px)
  );
}

.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 0;
}

.nav-link.active {
  color: #f39c12; /* 给活跃项加个高亮色 */
}

这个方案里，导航栏底部中间会出现一个三角形缺口，直接透出body的渐变背景，刚好对应“关于”页面的活跃状态。你可以调整clip-path里的12px来改变三角形的大小。

方案2：JS动态定位指示器（适合多活跃项切换的场景） #

如果你的导航项不止3个，需要三角形跟着活跃项移动，那可以用jQuery（或原生JS）动态计算活跃项的位置，然后修改clip-path的坐标：

完整代码示例（jQuery版）： #

<nav class="main-nav">
  <a href="#" class="nav-link">首页</a>
  <a href="#" class="nav-link active">关于</a>
  <a href="#" class="nav-link">作品</a>
  <a href="#" class="nav-link">博客</a>
  <a href="#" class="nav-link">联系我们</a>
</nav>

/* CSS部分和方案1基本一致，只是去掉固定的clip-path */
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.main-nav {
  background: #2c3e50;
  padding: 1rem 2rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  position: relative;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 0;
}

.nav-link.active {
  color: #f39c12;
}

$(document).ready(function() {
  // 定义更新指示器的函数
  function updateActiveIndicator() {
    const $activeItem = $('.nav-link.active');
    if (!$activeItem.length) return;
    
    const triangleSize = 12; // 三角形大小
    const navOffset = $('.main-nav').offset().left;
    const itemLeft = $activeItem.offset().left - navOffset;
    const itemWidth = $activeItem.width();
    const centerX = itemLeft + itemWidth / 2; // 活跃项的中心位置
    
    // 动态生成clip-path坐标
    const clipPath = `polygon(
      0 0, 
      100% 0, 
      100% calc(100% - ${triangleSize}px), 
      ${centerX + triangleSize}px calc(100% - ${triangleSize}px), 
      ${centerX}px 100%, 
      ${centerX - triangleSize}px calc(100% - ${triangleSize}px), 
      0 calc(100% - ${triangleSize}px)
    )`;
    
    $('.main-nav').css('clip-path', clipPath);
  }
  
  // 页面加载时初始化指示器
  updateActiveIndicator();
  
  // 窗口大小变化时重新计算
  $(window).resize(updateActiveIndicator);
  
  // 点击导航项切换活跃状态并更新指示器
  $('.nav-link').click(function(e) {
    e.preventDefault();
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
    updateActiveIndicator();
  });
});

这个方案里，点击任意导航项，三角形指示器都会自动移动到对应的活跃项下方，完全适配动态场景。

总结一下：

• 纯CSS方案适合固定位置的活跃指示器，简单高效；
• JS方案适合需要动态切换的场景，灵活度更高；
• 两种方案都不需要复杂的工具，完全能实现你要的「父元素挖洞透出背景」的效果。

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