我正在嘗試使用 Blazor 創建一些動態 html。本質上，我想要一個引導（5.1）導航選項卡，其中包含許多通過 for 回圈創建的生成導航選項卡
下面的代碼：
@:<ul class="nav nav-tabs" id="myTab" role="tablist">
@foreach(var tab in navTabs)
{
<li class="nav-item" role="presentation">
<button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">Tab</button>
</li>
}
@:</ul>
第一行的 ul 標簽似乎是自動關閉的，所以 li 標簽永遠不會添加到導航選項卡中。我也嘗試過 MarkupString。
uj5u.com熱心網友回復：
如果你想添加<ul></ul>到 html，并tab用作按鈕的內容。你可以試試這個：
<ul class="nav nav-tabs" id="myTab" role="tablist">
@foreach(var tab in navTabs)
{
<li class="nav-item" role="presentation">
<button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">@tab</button>
</li>
}
</ul>
uj5u.com熱心網友回復：
您有 3 條單獨的行中斷為 HTML，因此編譯器將關閉該元素。
@:@{
<ul class="nav nav-tabs" id="myTab" role="tablist">
@foreach(var tab in navTabs)
{
<li class="nav-item" role="presentation">
<button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">Tab</button>
</li>
}
</ul>
};
如果您在該@code部分中生成渲染片段，為什么不將它們單獨制作成您可以有條件地使用的組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/408964.html
標籤：
上一篇：帶有2個下拉選單和一個按鈕的Bootstrap5CardHeader不在另一個旁邊顯示，而是在頂部
下一篇：大螢屏中的視頻