Bootstrap 4.5标签总是打开页面而不是标签内容在Blazor

Question

我是Blazor的新手，刚刚使用WASM, Bootstrap 4.5和。net 5做了一个新项目。我试图使一个标签布局工作，但每当我点击我的标签，他们试图导航到一个新的页面，而不是打开相关的标签内容。

我不太确定我在这里做错了什么，因为查看页面的示例显示我正在做示例正在做的事情(尽管现在可能我只是对自己的代码变得盲目了)

下面是从我的GameDetails.razor页面生成制表符及其内容的代码:

@if (_game != null)
{
<ul class="nav nav-pills nav-fill" role="tablist">
@foreach (Tuple<string, string> key in _parsedMappings.Keys)
{
<li class="nav-item">
<a class="nav-link @(_isFirstElem == true ? "active" : "")"
id="@key.Item2.Replace(" ", "")-tab"
data-toggle="tab"
href="#@key.Item2.Replace(" ", "")"
role="tab"
aria-controls="@key.Item2.Replace(" ", "")"
aria-selected="@(_isFirstElem == true ? "true" : "false")">@key.Item1, @key.Item2</a>
</li>
_isFirstElem = false;
}
@if (_isFirstElem == false) _isFirstElem = true;
</ul>
<div class="tab-content" id="tabContent">
@foreach (KeyValuePair<Tuple<string, string>, List<Mapping>> pair in _parsedMappings)
{
<div class="tab-pane fade show @(_isFirstElem == true ? "active" : "")"
id="@pair.Key.Item2.Replace(" ", "")"
role="tabpanel"
aria-labelledby="@pair.Key.Item2.Replace(" ", "")-tab">
<ul class="list-group">
@foreach (Mapping mapping in pair.Value)
{
<li class="list-group-item">
<b>@mapping.FunctionName</b>: <i>@mapping.Key</i>
</li>
}
</ul>
</div>
_isFirstElem = false;
}
</div>
}

生成如下html:

<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item"><a class="nav-link active" id="Keyboard&Mouse-tab" data-toggle="tab" href="#Keyboard&Mouse" role="tab" aria-controls="Keyboard&Mouse" aria-selected="true">PC, Keyboard & Mouse</a>
</li>
<li class="nav-item"><a class="nav-link " id="NintendoSwitchJoycons-tab" data-toggle="tab" href="#NintendoSwitchJoycons" role="tab" aria-controls="NintendoSwitchJoycons" aria-selected="false">Nintendo Switch, Nintendo Switch Joycons</a>
</li>
</ul>
<div class="tab-content" id="tabContent">
<div class="tab-pane fade show active" id="Keyboard&Mouse" role="tabpanel" aria-labelledby="Keyboard&Mouse-tab">
<ul class="list-group">
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
...
</ul>
</div>
<div class="tab-pane fade show " id="NintendoSwitchJoycons" role="tabpanel" aria-labelledby="NintendoSwitchJoycons-tab">
<ul class="list-group">
<li class="list-group-item">...</i></li>
<li class="list-group-item">...</i></li>
...
</ul>
</div>
</div>

据我所知是正确的格式。所以我不太确定为什么标签试图导航到一个网页，而不是打开标签的内容。

我做错了什么?

Answer 1

尝试删除"&"符号from id=">

属性