如何使用JavaScript获取Bootstrap 4无序列表中的激活列表项

安全阿岳

2026-10-7

失效原因

Bootstrap 3 中下拉菜单的active状态类是添加在<a>标签外层的<li>元素上，你之前写的.dropdown-menu > .active > a选择器可以匹配到对应元素。但Bootstrap 4调整了下拉菜单的DOM规则，active类直接加在<a class="dropdown-item">元素本身，旧选择器匹配不到符合规则的元素，因此返回null。

修正后的实现代码

// 查找URL端点（通常作用类似数据库表名）
var activeItem = document.querySelector(".dropdown-menu .dropdown-item.active");
// 增加非空判断，避免无激活下拉项时控制台报错
if (activeItem) {
  var endpoint = activeItem
    .getAttribute("href")
    .split(".")[1]
    .replace("/", "");
  console.log("endpoint: " + endpoint);
}