时间戳

首页 > 解决方案 > BootStrap 5.0：具有多个目标的药丸标签

html - BootStrap 5.0：具有多个目标的药丸标签

问题描述

I'm trying to mix a Pill's Tab with some Collapse Multi targets , so that, when a certain pill is selected, the corresponding pane appears and a secondary pane closes.

In the case below, when Profile is selected the profile tab should appear and the Textdiv should disappear. 选择另一个选项卡时，“相应的标签”应再次打开，并且DIV也应显示自身。

我将data-bs-target配置文件药丸切换到一个类，因为它在 Collapse Multi targets Docs 中，但它并不是那么简单。也玩了id's 但没有结果。

似乎无法找到仅使用 Bootstrap 的方法：/

<!DOCTYPE html>
<html>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
  
  <!-- FavIcon -->
  <link rel="shortcut icon" href="../images/favicon.ico" type="image/png">
  <link rel="icon" href="../images/favicon.ico" type="image/png">
  <title>MyGarden</title>
</head>

<body>
  <!-- Optional JavaScript; choose one of the two! -->
  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>


<div>
    Text
</div>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target=".pills-profile" type="button" role="tab" aria-controls="pills-profile pills-profile2" aria-selected="false">Profile</button>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">This doesn't matter</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">This also doesn't matter</div>
    <div class="tab-pane fade pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Profile</div>
</div>

</body>

</html>

标签： htmlcssbootstrap-5

解决方案

推荐阅读