如何为成排排列的box元素添加独立点击跳转链接功能

提供两种实现方式，可根据实际开发场景选择： #

方案1：纯HTML实现（优先推荐） #

直接把.box对应的div标签替换为a标签，天然支持跳转逻辑，无需额外编写JS代码，是符合W3C规范的最优实现，支持右键打开新窗口、搜索引擎抓取、无障碍设备识别等原生链接特性。
修改后的box容器代码如下：

<div class="box-container">
    <a href="替换为第一章的实际跳转地址" class="box">Chapter 1</a>
    <a href="替换为第二章的实际跳转地址" class="box">Chapter 2</a>
    <a href="替换为第三章的实际跳转地址" class="box">Chapter 3</a>
    <a href="替换为第四章的实际跳转地址" class="box">Chapter 4</a>
    <a href="替换为第五章的实际跳转地址" class="box">Chapter 5</a>
    <a href="替换为第六章的实际跳转地址" class="box">Chapter 6</a>
    <a href="替换为第七章的实际跳转地址" class="box">Chapter 7</a>
    <a href="替换为第八章的实际跳转地址" class="box">Chapter 8</a>
    <a href="替换为第九章的实际跳转地址" class="box">Chapter 9</a>
</div>

注意：如果原本.box的CSS样式是基于div标签定义的，需要给.box补充display: block属性，保证替换为a标签后样式和原有效果完全一致。

方案2：JS实现（无需改动原有HTML结构） #

如果受开发规则限制不能修改原有div标签结构，可以通过添加自定义属性+绑定点击事件的方式实现跳转，代码如下：
首先修改box的HTML部分，给每个box添加data-url属性存储跳转地址：

<div class="box-container">
    <div class="box" data-url="替换为第一章的实际跳转地址">Chapter 1</div>
    <div class="box" data-url="替换为第二章的实际跳转地址">Chapter 2</div>
    <!-- 剩余box按照同样规则添加data-url属性即可 -->
</div>

再添加如下JS代码：

const boxes = document.querySelectorAll('.box')
boxes.forEach(box => {
  // 添加手型光标，和原生链接体验一致
  box.style.cursor = 'pointer'
  // 绑定点击跳转事件
  box.addEventListener('click', () => {
    // 当前窗口跳转写法：
    window.location.href = box.dataset.url
    // 如需新窗口打开，把上面一行替换为：window.open(box.dataset.url, '_blank')
  })
})

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