如何用JavaScript切换Bootstrap导航图标类的-fill后缀

要实现点击导航项时切换对应图标的-fill后缀，同时重置其他图标的状态，核心是替换图标类名——这也是classList.toggle无法直接实现需求的原因，因为它只能添加/移除独立类，不能修改已有类的后缀。下面提供两种可行的实现方式：

方式一：无需修改现有HTML，通过类名匹配处理 #

直接基于你现有的DOM结构，通过查找类名完成替换：

// 获取所有导航链接元素
const navLinks = document.querySelectorAll('.nav-link');

// 给每个导航链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认锚点跳转

    // 第一步：重置所有图标，移除-fill后缀
    document.querySelectorAll('.bi').forEach(icon => {
      // 找到带-fill的类
      const filledClass = Array.from(icon.classList).find(cls => cls.endsWith('-fill'));
      if (filledClass) {
        // 移除填充类，恢复基础类
        icon.classList.remove(filledClass);
        icon.classList.add(filledClass.replace('-fill', ''));
      }
    });

    // 第二步：给当前点击的图标添加-fill后缀
    const currentIcon = this.querySelector('.bi');
    // 找到图标对应的基础类（不带-fill）
    const baseIconClass = Array.from(currentIcon.classList).find(cls => cls.startsWith('bi-') && !cls.endsWith('-fill'));
    if (baseIconClass) {
      currentIcon.classList.remove(baseIconClass);
      currentIcon.classList.add(`${baseIconClass}-fill`);
    }
  });
});

方式二：通过data属性存储图标名称，更简洁易维护 #

给每个图标标签添加data-icon属性存储基础图标名称，后续操作会更直观：

修改后的HTML #

<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-house" data-icon="house"></i>
    </a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-heart" data-icon="heart"></i>
    </a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-envelope" data-icon="envelope"></i>
    </a>
</li>

对应的JS代码 #

const navLinks = document.querySelectorAll('.nav-link');

navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();

    // 重置所有图标为基础样式
    document.querySelectorAll('.bi').forEach(icon => {
      const iconName = icon.dataset.icon;
      icon.className = `bi bi-${iconName}`; // 直接重置类名
    });

    // 设置当前点击的图标为填充样式
    const currentIcon = this.querySelector('.bi');
    const iconName = currentIcon.dataset.icon;
    currentIcon.className = `bi bi-${iconName}-fill`;
  });
});

关键说明 #

• 两种方式都遵循「先重置所有状态，再设置当前选中状态」的逻辑，确保同一时间只有一个图标是填充样式。
• 如果你需要保留默认选中的图标，只需在页面加载时手动触发一次对应导航链接的点击事件即可。

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