Bootstrapのナブタブの表示がおかしい

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件

自己解決

解決方法

①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

Larkiwing

総合スコア120

m.ts10806

2021/04/28 07:33

久々に良い自己解決を見た気がします。＋1

Larkiwing

2021/04/28 07:44

アドバイスありがとうございました。

K_3578

2021/04/28 07:51

段階的に行ったことを書けている、指摘内容を理解した上で自分のやりたかったことを明示できている。（そうそう、こういうのでいいんだよ。と言うわけで高評価）強いて言うなら回答の並び順って評価の数で決まるので、 >上記のコメントでより、「○○(ユーザー名)さんの回答で」とかの方が良いかも。

m.ts10806

2021/04/28 07:52

ドキュメントは大事ですがコードだけでなく注釈まで読むようにするとより確実な理解につながるので、ぜひ（Bootstrapは日本語版ドキュメントも充実しているので私が提示した原文にこだわらなくても良いですが、中には日本語訳がないものもあるので）

Larkiwing

2021/04/28 08:15

m.ts10806さん、日本語の方も見てみます。ありがとうございます。(*´ω｀*) K_3578さん、了解です。変更しておきました。ありがとうございます。(*´ω｀*)

行動規範の内容に同意します

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

m.ts10806

総合スコア80875