Bootstrap 4中带disabled类的导航链接是否仍可跳转至目标页面？

嘿，这个问题其实很多刚上手Bootstrap的同学都会疑惑，我来给你讲明白～

首先直接给结论：你示例里的这个链接，点击后是会正常跳转到/example页面的。

为啥呢？因为Bootstrap 4里的.disabled类只是给导航链接添加了「禁用的视觉样式」——比如文字变灰、鼠标悬停时显示禁止图标，但它并没有从功能上阻止链接的默认跳转行为。浏览器依然会识别这是一个正常的<a>标签，点击后会按照href属性指定的地址跳转。

如果你想让这个链接真正无法跳转，得额外做一些处理，给你几个常用的方案：

• 把<a>标签替换成<span>标签，保留.nav-link disabled类，这样既保留禁用样式，又没有跳转功能：

  <div class="collapse navbar-collapse" id="NavbarCollapse">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <span class="nav-link disabled">Link 5</span>
      </li>
    </ul>
  </div>
  

• 给<a>标签修改href属性，比如改成javascript:void(0)（不会锚定到页面顶部）：

  <div class="collapse navbar-collapse" id="NavbarCollapse">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link disabled" href="javascript:void(0)">Link 5</a>
      </li>
    </ul>
  </div>
  

• 用JavaScript阻止默认跳转事件，适合需要保留<a>标签结构的场景：

  <div class="collapse navbar-collapse" id="NavbarCollapse">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link disabled" href="/example" onclick="event.preventDefault()">Link 5</a>
      </li>
    </ul>
  </div>
  

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