从PHP获取href，解决JavaScript中单选<li>元素href获取异常问题

第一步：正确获取选中的

集合 #

首先你得确保能准确拿到所有被选中的

const selectedItems = document.querySelectorAll('li.selected');

这个方法会返回一个包含所有选中

第二步：单个选中时正确提取href #

这里要注意：

情况1：

里面包含标签（菜单的常规写法） #

如果你的菜单结构是这样的：

<li class="selected"><a href="page1.php">页面1</a></li>
<li><a href="page2.php">页面2</a></li>

那你需要先找到

if (selectedItems.length === 1) {
  // 获取<a>标签的href属性（用getAttribute拿相对路径，直接用href会返回绝对路径）
  const targetHref = selectedItems[0].querySelector('a').getAttribute('href');
  // 执行页面跳转
  window.location.href = targetHref;
} else {
  // 你已经正常工作的多选逻辑
  console.log("选中多个或未选中，执行else分支");
}

情况2：

用自定义data属性存储href #

如果是把href存在

<li class="selected" data-href="page1.php">页面1</li>
<li data-href="page2.php">页面2</li>

那直接通过dataset获取即可：

if (selectedItems.length === 1) {
  const targetHref = selectedItems[0].dataset.href;
  window.location.href = targetHref;
} else {
  // 多选逻辑
}

第三步：检查选中状态的标记逻辑（很重要！） #

如果上面的代码还是不行，大概率是你的选中标记有问题。比如点击单个

如果是单选模式（只能选一个），可以给每个

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', function() {
    // 先移除所有<li>的selected类
    document.querySelectorAll('li.selected').forEach(item => item.classList.remove('selected'));
    // 给当前点击的<li>添加选中类
    this.classList.add('selected');
  });
});

如果是支持多选（比如按住Ctrl点击切换选中），那逻辑改成切换当前

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', function(e) {
    // 按住Ctrl/Command键时允许多选
    if (e.ctrlKey || e.metaKey) {
      this.classList.toggle('selected');
    } else {
      // 否则单选，移除其他选中状态
      document.querySelectorAll('li.selected').forEach(item => item.classList.remove('selected'));
      this.classList.add('selected');
    }
  });
});

排查小技巧 #

如果还是拿不到href，可以在if分支里加日志排查：

if (selectedItems.length === 1) {
  console.log("选中的元素：", selectedItems[0]);
  // 对应情况1的日志
  console.log("里面的a标签：", selectedItems[0].querySelector('a'));
  // 对应情况2的日志
  console.log("data-href值：", selectedItems[0].dataset.href);
}

通过日志就能快速定位是元素没被正确选中，还是href的获取方式出错了。

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