I have the issue that when I want to switch between content in my card only the first tab keeps showing.

This is the code that I currently have.

@foreach (var softwareCard in SoftwareInfoCards)
{
    <div >
        <div >
            <div >
                <div >
                    <ul  id="softwareTabs" role="tablist">
                        <li >
                            <a  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 >
                            <a  id="@("#"   softwareCard.Title)" data-toggle="tab" href="@("#"   softwareCard.Title)" role="tab" aria-controls="@("#"   softwareCard.Title)" aria-selected="false">Downloads</a>
                        </li>
                    </ul>
                </div>
                <div >
                    <div  id="softwareTabsContent">

                        <div  id="@("#home"   softwareCard.Title)" role="tabpanel" aria-labelledby="@(softwareCard.Title   "-home-tab")">
                            <img  src="@softwareCard.Image" alt="@softwareCard.Title" />
                            <div >
                                <h4 >@softwareCard.Title</h4>
                                <p >@softwareCard.Description</p>
                            </div>
                        </div>

                        <div  id="@("#"   softwareCard.Title)" role="tabpanel" aria-labelledby="@(softwareCard.Title   "-tab")">
                            <div >
                                <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"  @onclick="() => DetermineLink(link.Key)">Link</a></td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

I have been looking at other people's posts but I just can't seem to figure out what I am doing wrong.

CodePudding user response：

The id for tab and tab-pane should be:

Don't name the HTML element's id with the prefix '#'.

Correct the id for each tab and tab-pane as below:

Tab

<a  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  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  id="@("home-"   softwareCard.Title)" role="tabpanel" aria-labelledby="@("home-"   softwareCard.Title   "-tab")">
  ...
</div>

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

Result

Overview tab

Download tab

References

Navs - Bootstrap (Using data attributes section)