如何让段落内的<span>元素点击后跳转至指定链接？

下面提供两种常用方案，根据你的HTML修改权限选择：

方案一：直接替换为标签（推荐） #

如果允许修改原始HTML结构，直接把<span>替换成原生<a>标签是最优解——它自带跳转功能，支持浏览器默认的可点击样式，还能兼容无障碍访问：

<p>This is an example of a 
  <a href="你的预设链接地址" class="paragraph-link-example" target="_blank"> paragraph </a> 
</p>

• target="_blank"：控制在新窗口/标签页打开链接，不需要的话可以去掉
• 保留原类名paragraph-link-example，方便你沿用原有样式

方案二：用JavaScript绑定点击事件（无需修改HTML） #

如果不能改动现有HTML结构，用JavaScript给目标span绑定点击事件即可：

原生JavaScript实现 #

// 1. 定义预设跳转链接
const targetUrl = "https://你的目标链接.com";
// 2. 获取所有带指定类的span元素
const clickableSpans = document.querySelectorAll(".paragraph-link-example");

// 3. 给每个span绑定点击事件
clickableSpans.forEach(span => {
  span.addEventListener("click", () => {
    // 在新窗口打开链接
    window.open(targetUrl, "_blank");
  });
  // 可选：添加鼠标指针样式，提示用户该元素可点击
  span.style.cursor = "pointer";
});

（可选）支持多链接的进阶写法 #

如果需要不同的span对应不同链接，可以给span添加data-url自定义属性，再通过JS读取：

<p>This is an example of a 
  <span class="paragraph-link-example" data-url="https://链接1.com"> paragraph1 </span> 
  <span class="paragraph-link-example" data-url="https://链接2.com"> paragraph2 </span> 
</p>

对应的JS代码：

const clickableSpans = document.querySelectorAll(".paragraph-link-example");

clickableSpans.forEach(span => {
  span.addEventListener("click", () => {
    const url = span.dataset.url;
    if (url) {
      window.open(url, "_blank");
    }
  });
  span.style.cursor = "pointer";
});

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