Bootstrap卡片導航不顯示其他內容

我遇到的問題是，當我想在卡片中的內容之間切換時，只有第一個選項卡會一直顯示。

這是我目前擁有的代碼。

@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>
}

我一直在看其他人的帖子，但我似乎無法弄清楚我做錯了什么。

uj5u.com熱心網友回復：

選項卡和選項卡窗格的 id 應該是：

不要使用前綴 '#' 命名 HTML 元素的 id。

更正每個選項卡和選項卡窗格的 id，如下所示：

標簽

<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>

標簽面板

<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>

結果

概覽選項卡

下載選項卡

參考

Navs - Bootstrap（使用資料屬性部分）

標籤：网站 asp.net-mvc bootstrap-4

上一篇：更新面板中的資料未保存在資料庫中

下一篇：在沒有重復ID的控制元件中呈現專案集合的問題