时间戳

首页 > 解决方案 > 添加 data-bs-toggle 和 data-bs-target 断开链接

html - 添加 data-bs-toggle 和 data-bs-target 断开链接

问题描述

使用 Bootstrap 我创建了一个导航栏。单击链接后，我希望导航栏崩溃。添加 data-bs-toggle 和 data-bs-target 时，导航栏会 revert ，但会断开链接。如果有人能指出我做错了什么，我将不胜感激。

这是一个演示JsFiddle

      <div class="container">
        <a class="navbar-brand" href="#home"><span class="logo great-vibes">Drip N Dip</span> </a>
        <div class="nav-button">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      </div>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#home"  data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#menu">Menu</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#gallery">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>```

标签： htmltwitter-bootstrap

解决方案

遇到了同样的问题并找到了解决方法。只需用跨度标签和所需的数据属性包装您的链接名称。

<a class="nav-link" href="#home">
  <span data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    Home
  </span>
</a>

在此处查找原件：添加数据切换和数据目标中断导航链接

推荐阅读