Bootstrap卡片导航不显示其他内容

Question

我有一个问题，当我想在我的卡片中的内容之间切换时，只有第一个选项卡一直显示。

这是我目前拥有的代码。

@foreach (var softwareCard in SoftwareInfoCards)
{
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs pull-right" id="softwareTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="@("#home" + softwareCard.Title)" data-toggle="tab" href="@("#home" + softwareCard.Title)" role="tab" aria-controls="@("#home" + softwareCard.Title)" aria-selected="true">Overview</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="@("#" + softwareCard.Title)" data-toggle="tab" href="@("#" + softwareCard.Title)" role="tab" aria-controls="@("#" + softwareCard.Title)" aria-selected="false">Downloads</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="softwareTabsContent">

                        <div class="tab-pane fade show active" id="@("#home" + softwareCard.Title)" role="tabpanel" aria-labelledby="@(softwareCard.Title + "-home-tab")">
                            <img class="card-img-top w-75 mx-auto d-block" src="@softwareCard.Image" alt="@softwareCard.Title" />
                            <div class="card-body">
                                <h4 class="card-title">@softwareCard.Title</h4>
                                <p class="card-text">@softwareCard.Description</p>
                            </div>
                        </div>

                        <div class="tab-pane" id="@("#" + softwareCard.Title)" role="tabpanel" aria-labelledby="@(softwareCard.Title + "-tab")">
                            <div class="card-body d-flex justify-content-between">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Version</th>
                                            <th scope="col">@(softwareCard.Title + " Software link")</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var link in softwareCard.RedirectUris)
                                        {
                                            <tr>
                                                <td>@link.Key</td>
                                                <td><a data-toggle="modal" href="#popup" class="btn btn-secondary" @onclick="() => DetermineLink(link.Key)">Link</a></td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

我一直在看别人的帖子，但我似乎无法弄清楚我做错了什么。

Answer 1

选项卡和选项卡窗格的 ID 应为：

Tab	Tab Pane
home-Name1-tab	home-Name1
download-Name1-tab	download-Name1

不要使用前缀“#”命名 HTML 元素的 ID。

如下更正每个选项卡和选项卡窗格的 ID：

Tab

<a class="nav-link active" id="@("home-" + softwareCard.Title + "-tab")" data-toggle="tab" href="@("#home-" + softwareCard.Title)" role="tab" aria-controls="@("home-" + softwareCard.Title)" aria-selected="true">Overview</a>

<a class="nav-link" id="@("download-" + softwareCard.Title + "-tab")" data-toggle="tab" href="@("#download-" + softwareCard.Title)" role="tab" aria-controls="@("download-" + softwareCard.Title)" aria-selected="false">Downloads</a>

Tab-pane

<div class="tab-pane fade show active" id="@("home-" + softwareCard.Title)" role="tabpanel" aria-labelledby="@("home-" + softwareCard.Title + "-tab")">
  ...
</div>

<div class="tab-pane" id="@("download-" + softwareCard.Title)" role="tabpanel" aria-labelledby="@("download-" + softwareCard.Title + "-tab")">
  ...
</div>

---

结果

Overview tab

Download tab

---

参考资料

Navs - Bootstrap (Using data attributes section)