按下 li 时如何打开链接

在网页开发中，我们经常需要为用户提供一些链接，例如导航链接或文章链接等。在 HTML 中，我们使用<a>标签来创建链接。但是如何使用户可以通过点击列表元素（<li>标签）打开链接呢？下面，我们将介绍两种实现方式。

方法一：JavaScript

通过JavaScript，我们可以为<li>元素添加点击事件，并在事件处理程序中打开链接。

// 获取所有列表元素
const list = document.querySelectorAll("li");

// 为每个列表元素添加点击事件
list.forEach(item => {
  item.addEventListener("click", () => {
    // 获取链接地址
    const link = item.getAttribute("data-link");
    // 打开链接
    window.open(link, "_blank");
  });
});

在上面的代码中，我们首先获取所有<li>元素，然后为每个元素添加点击事件。在事件处理程序中，我们获取data-link属性的值作为链接地址，然后使用window.open()方法打开链接。

使用上述方法，我们需要为每个列表元素添加data-link属性，以存储对应链接地址。

<ul>
  <li data-link="https://www.example.com">列表项1</li>
  <li data-link="https://www.example.com/article">列表项2</li>
  <li data-link="https://www.example.com/about">列表项3</li>
</ul>

方法二：HTML

在 HTML 中，我们可以将<a>标签嵌套在<li>标签中，以实现点击列表项打开链接的效果。

<ul>
  <li><a href="https://www.example.com">列表项1</a></li>
  <li><a href="https://www.example.com/article">列表项2</a></li>
  <li><a href="https://www.example.com/about">列表项3</a></li>
</ul>

以上就是两种实现方式，具体选择需要根据实际情况来决定。