Cube Portfolio灯箱内添加跳转链接的技术方案咨询

你遇到的问题确实很常见——HTML不允许<a>标签嵌套，直接在灯箱的锚点里加链接会导致语法错误和交互冲突。不过不用修改Cube Portfolio的核心代码，我们可以用自定义HTML标记+事件委托的方式实现需求，步骤如下：

1. 修改HTML的data-title属性 #

把需要跳转的描述文本用带自定义属性的<span>包裹，避免嵌套<a>标签：

<div class="cbp-item web-design">
  <a href="images/portfolio-case-01.jpg" class="cbp-caption cbp-lightbox" 
     data-title="Personal Trainer Jonas Roberts<br><span class='lightbox-link' data-target='/jonas-roberts-details'>Mobile and Desktop Website</span>">
    <!-- 缩略图和其他内容保持不变 -->
    <div class="cbp-caption-defaultWrap">
      <img src="images/portfolio-case-01-thumbnail.jpg" alt="portfolio Malthe Stigaard">
    </div>
    <div class="cbp-caption-activeWrap">
      <div class="cbp-l-caption-alignCenter">
        <div class="cbp-l-caption-body">
          <div class="cbp-l-caption-title">Personal Trainer Jonas Roberts</div>
          <div class="cbp-l-caption-desc">Mobile and Desktop Website</div>
        </div>
      </div>
    </div>
  </a>
</div>

这里我们用data-target存储跳转的目标URL，lightbox-link作为自定义类名用于后续绑定事件。

2. 添加事件委托处理跳转 #

因为灯箱内容是动态生成的，直接绑定点击事件会失效，所以我们用jQuery的事件委托，监听整个文档中.lightbox-link的点击事件：
在你的Cube Portfolio初始化脚本之后添加这段代码：

$(document).on('click', '.lightbox-link', function(e) {
  // 阻止事件冒泡，避免触发灯箱锚点的默认行为（比如关闭灯箱）
  e.stopPropagation();
  // 获取目标URL并跳转
  const targetUrl = $(this).data('target');
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

3. 添加CSS样式（让文本看起来像链接） #

给.lightbox-link添加链接样式，让访客知道它可点击：

.lightbox-link {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}

.lightbox-link:hover {
  color: #004499;
}

为什么这种方法有效？ #

• 完全符合HTML规范：没有嵌套<a>标签，用<span>+自定义属性替代，避免语法错误。
• 无需修改核心脚本：所有修改都是在你自己的代码里完成，不会影响Cube Portfolio的原有功能。
• 对新手友好：只需要修改HTML、添加几行JS和CSS，不需要深入理解插件的核心逻辑。

如果你的多个作品都需要跳转，只需要重复修改每个cbp-item的data-title即可，非常方便。

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