Q&A
つまりBundleだけ呼び込めばいいということですね。
ありがとうございます。
Bootstrapのナブタブの表示がおかしいです。
それぞれのidに対して表示したい内容をのせたのですが、
ちゃんと表示されません。
例えばid="nav-home"、id="nav-profile"、id="nav-contact"の中にdivで囲ったのですが、
id="nav-home"の内容がid="nav-profile"やid="nav-contact"をクリックした時にも
表示されてしまいます。
また、クリックするたびに表示される内容が減っていきます。
なぜなんでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!--Metaタグ--> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 9 <!--Bootstrap CSS--> 10 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> 11 12 <!--Fontawesome--> 13 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> 14 15 <title>Document</title> 16</head> 17<body> 18 <nav class="container"> 19 <div class="nav nav-tabs" id="nav-tab" role="tablist"> 20 <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">病院からのお知らせ</button> 21 <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">医療関係の方へのお知らせ</button> 22 <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">採用情報</button> 23 </div> 24 </nav> 25 <div class="tab-content container1" id="nav-tabContent"> 26 <div class="tab-pane fade show active p-3" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> 27 <p class="d-inline p-2">2021年4月1日</p> 28 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 29 <a class="d-inline p-2" href="">＜オンラインセカンドオピニオン相談＞１診療科追加のお知らせ</a> 30 </div> 31 <div class="tab-pane fade show active p-3" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> 32 <p class="d-inline p-2">2021年3月1日</p> 33 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 34 <a class="d-inline p-2" href="">工事に伴う駐車場出入口の一部変更と機械式ゲートの設置について [2021年7月22日以降]</a> 35 </div> 36 <div class="tab-pane fade show active p-3" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> 37 <p class="d-inline p-2">2021年2月1日</p> 38 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 39 <a class="d-inline p-2" href="">（再掲）ご相談とお問合せについて</a> 40 </div> 41 <div class="tab-pane fade show active p-3" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> 42 <p class="d-inline p-2">2019年1月1日</p> 43 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 44 <a class="d-inline p-2" href="">2021年ゴールデンウィークの診療日に関するお知らせ</a> 45 </div> 46 <div class="tab-pane fade show p-3" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> 47 <p class="d-inline p-2">2021年4月1日</p> 48 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 49 <a class="d-inline p-2" href="">2021年4月初診診療担当医表</a> 50 </div> 51 <div class="tab-pane fade show p-3" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> 52 <p class="d-inline p-2">2021年4月1日</p> 53 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 54 <a class="d-inline p-2" href="">2021年3月初診診療担当医表</a> 55 </div> 56 <div class="tab-pane fade show p-3" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> 57 <p class="d-inline p-2">2021年4月1日</p> 58 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 59 <a class="d-inline p-2" href="">2021年2月初診診療担当医表</a> 60 </div> 61 <div class="tab-pane fade show p-3" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> 62 <p class="d-inline p-2">2021年4月1日</p> 63 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 64 <a class="d-inline p-2" href="">2021年1月初診診療担当医表</a> 65 </div> 66 <div class="tab-pane" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> 67 <p><a href="">採用情報についてはこちらのページからご確認ください。</a></p> 68 </div> 69 </div> 70 <!--Bootstrap Js--> 71 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> 72 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script> 73 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script> 74</body> 75</html> 76
回答2件
0
自己解決
解決方法
①m.ts10806さんの回答でご指摘頂いたように、bootstrap.jsを2回呼び出してしまったので、自分の実行したいコンポーネントを確認しつつ設定します。
今回は、3つあるうちの1つ目を残し、残りは消しました。
②activeクラスはまず一つだけ指定することができるので、一番上のactiveだけ残して残りは削除します。
③次にtab-paneクラスに関しては複数使用することができません。1つのタブに対して１つだけの指定が可能です。そのため、表示したい内容を増やしたい場合にはコンテントを増やす必要があります。
僕の場合はPタグでインライン要素として、横並びにしたいので、
divでマージンをつけていい感じに表示させました。
以下コードになります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!--Metaタグ--> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 9 <!--Bootstrap CSS--> 10 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> 11 12 <!--Fontawesome--> 13 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> 14 15 <title>Document</title> 16</head> 17<body> 18 <nav class="container"> 19 <div class="nav nav-tabs" id="nav-tab" role="tablist"> 20 <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">病院からのお知らせ</button> 21 <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">医療関係の方へのお知らせ</button> 22 <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">採用情報</button> 23 </div> 24 </nav> 25 <div class="tab-content container1" id="nav-tabContent"> 26 <div class="tab-pane fade show active p-3" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> 27 <div class="m-4"> 28 <p class="d-inline p-2">2021年4月1日</p> 29 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 30 <a class="d-inline p-2" href="">＜オンラインセカンドオピニオン相談＞１診療科追加のお知らせ</a> 31 </div> 32 <div class="m-4"> 33 <p class="d-inline p-2">2021年3月1日</p> 34 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 35 <a class="d-inline p-2" href="">工事に伴う駐車場出入口の一部変更と機械式ゲートの設置について [2021年7月22日以降]</a> 36 </div> 37 <div class="m-4"> 38 <p class="d-inline p-2">2021年2月1日</p> 39 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 40 <a class="d-inline p-2" href="">（再掲）ご相談とお問合せについて</a> 41 </div> 42 <div class="m-4"> 43 <p class="d-inline p-2">2019年1月1日</p> 44 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 45 <a class="d-inline p-2" href="">2021年ゴールデンウィークの診療日に関するお知らせ</a> 46 </div> 47 </div> 48 <div class="tab-pane fade show p-3" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> 49 <div class="m-4"> 50 <p class="d-inline p-2">2021年4月1日</p> 51 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 52 <a class="d-inline p-2" href="">2021年4月初診診療担当医表</a> 53 </div> 54 <div class="m-4"> 55 <p class="d-inline p-2">2021年4月1日</p> 56 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 57 <a class="d-inline p-2" href="">2021年3月初診診療担当医表</a> 58 </div> 59 <div class="m-4"> 60 <p class="d-inline p-2">2021年4月1日</p> 61 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 62 <a class="d-inline p-2" href="">2021年2月初診診療担当医表</a> 63 </div> 64 <div class="m-4"> 65 <p class="d-inline p-2">2021年4月1日</p> 66 <p class="text-white d-inline p-2" style="background-color: #e17d7d;">お知らせ</p> 67 <a class="d-inline p-2" href="">2021年1月初診診療担当医表</a> 68 </div> 69 </div> 70 <div class="tab-pane" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> 71 <div class="m-4"> 72 <p><a href="">採用情報についてはこちらのページからご確認ください。</a></p> 73 </div> 74 </div> 75 </div> 76 <!--Bootstrap Js--> 77 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> 78</body> 79</html> 80
こんな感じです。
(*´-ω-｀)・・・ﾌｩ ﾔｯﾄﾃﾞｷﾀ!!
投稿2021/04/28 07:24
編集2021/04/28 08:12総合スコア120
0
Introductionあたりを読むと良いのでは。
JS
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of the following <script>s near the end of your pages, right before the closing </body> tag, to enable them.
と
Bundle
Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our contents section.
で
Separate
If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.
簡潔に言うと、bundleはbootstrap本体にpopperを含んだものです。
つまり、下記のように書くと
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
全て二重に呼んでいることになります。
投稿2021/04/27 11:47
総合スコア80861
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/28 07:33
2021/04/28 07:44
2021/04/28 07:51
2021/04/28 07:52
2021/04/28 08:15