Bootstrap导航栏下拉菜单切换按钮href属性取值咨询

解决方案 #

你这个场景下href属性有两类常用填写方式，根据你的需求选择即可：

• 如果你不需要点击Lists按钮本身跳转到任何页面，仅需要它作为下拉菜单的触发器：直接填#即可。你代码里已经加了data-bs-toggle="dropdown"属性，Bootstrap的内置脚本会自动拦截a标签的默认跳转行为，点击后只会弹出下拉菜单，不会触发页面跳转。
  如果你不想让点击后地址栏末尾多出#标识，也可以替换成javascript:;或者javascript:void(0)，效果完全一致。
• 如果你需要点击Lists按钮本身也能跳转至对应汇总页面（比如所有列表内容的汇总页），直接填写对应页面的路径即可，比如/lists。这种配置下点击按钮默认仍会触发下拉菜单，若需要实现“左键点击跳转、点击箭头展开下拉”的效果，需要额外做自定义交互配置，普通场景不建议这么用。

注意：要确保你页面已经正确引入了Bootstrap的JS依赖，否则下拉交互无法正常触发

修改后的示例代码如下：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Lists
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</li>
</ul>

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