html 我如何显示和隐藏内容与Bootstrap 5为更多的5个按钮,没有内容得到堆叠在对方的顶部

lnlaulya 于 2022-12-09 发布在 Bootstrap

关注(0)|答案(2)|浏览(146)

我有5个按钮，单击时会显示内容。我希望能够在单击任何按钮时隐藏内容。例如，单击按钮1会显示按钮1的内容。如果单击按钮5，我会先隐藏按钮1的内容，然后再显示按钮5的内容。
solution仅在有两个按钮时有效。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">
    Button 1
  </button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse1').classList.remove('show'); })();">
    Button 2
  </button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">
    Button 3
  </button>
</p>
<div class="collapse" id="collapse1">
  Button 1 content
</div>
<div class="collapse" id="collapse2">
  Button 2 content
</div>

<div class="collapse" id="collapse3">
  Button 3 content
</div>

Html

来源：https://stackoverflow.com/questions/74705674/how-can-i-show-and-hide-content-with-bootstrap-5-for-more-5-buttons-without-the

2条答案

按热度按时间

egmofgnx1#

作为一个专业的webdev我自己，我可以理解的斗争，使 Bootstrap 做你喜欢的
根据我的经验，我认为这可能会解决你的问题
第一个

赞(0）回复(0）举报 2022-12-09

ncgqoxb02#

看起来你只想喝点酒。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<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="#panel-1" type="button" role="tab" aria-controls="panel-1" aria-selected="true">Button 1</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="tab-2" data-bs-toggle="pill" data-bs-target="#panel-2" type="button" role="tab" aria-controls="panel-2" aria-selected="false">Button 2</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="tab-3" data-bs-toggle="pill" data-bs-target="#panel-3" type="button" role="tab" aria-controls="panel-3" aria-selected="false">Button 3</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="tab-4" data-bs-toggle="pill" data-bs-target="#panel-4" type="button" role="tab" aria-controls="panel-4" aria-selected="false">Button 4</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="tab-5" data-bs-toggle="pill" data-bs-target="#panel-5" type="button" role="tab" aria-controls="panel-5" aria-selected="false">Button 5</button>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="panel-1" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Panel 1</div>
  <div class="tab-pane fade" id="panel-2" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Panel 2</div>
  <div class="tab-pane fade" id="panel-3" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 3</div>
  <div class="tab-pane fade" id="panel-4" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 4</div>
  <div class="tab-pane fade" id="panel-5" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 5</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2022-12-09

我来回答

html 我如何显示和隐藏内容与Bootstrap 5为更多的5个按钮,没有内容得到堆叠在对方的顶部

2条答案

相关问题

热门标签

最新问答