js实现lihref

以下是几种常见的JavaScript实现<li>元素点击跳转（类似<a href>效果）的方法：

通过添加事件监听器实现跳转

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', function() {
    window.location.href = this.getAttribute('data-href');
  });
});

HTML需配合data-href属性：

<li data-href="https://example.com">可点击的列表项</li>

使用事件委托提高性能

document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    window.location.href = e.target.dataset.href;
  }
});

模拟a标签行为（包括右键菜单）

const li = document.querySelector('li');
li.style.cursor = 'pointer';
li.addEventListener('auxclick', e => {
  if (e.button === 1) window.open(li.dataset.href, '_blank');
});
li.addEventListener('click', e => {
  if (e.button === 0) window.location.href = li.dataset.href;
});

直接修改HTML结构

更简单的方案是直接在<li>内包裹<a>标签：

<li><a href="https://example.com">列表项内容</a></li>

每种方法各有优劣：事件监听方式适合动态内容，包裹<a>标签则更符合语义化且无需额外JavaScript。根据具体场景选择实现方式，注意移动端触摸事件可能需要额外处理。