URL 中带有空格的引导选项卡

Question

我稍微修改了引导选项卡，以便它们从控制器中提取 ID 而不是指定它们。

这一切都运行良好，但是它的一些 ID 的拉动在单词之间有空格。这导致这些选项卡无法工作。

基本上，所有带有单个单词的选项卡都可以正常工作，但是带有多个单词的选项卡则不起作用。

这是我的代码：

<!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        @foreach (var qs in Model)
        {
            <li role="presentation"><a href="#@qs.QuestionSectionName" aria-controls="home" role="tab" data-toggle="tab">@qs.QuestionSectionName</a></li>
        }
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        @foreach (var qs in Model)
        {
           <div role="tabpanel" class="tab-pane active" id="@qs.QuestionSectionName">
               <table class="table">
                   <tbody>

                       @foreach (var item in qs.Questions)
                       {
                           <tr>
                               <td>
                                   @Html.DisplayFor(modelItem => item.QuestionName)
                               </td>
                               <td>
                                   @Html.DisplayFor(modelItem => item.QuestionSection.QuestionSectionName)
                               </td>
                           </tr>
                       }
                   </tbody>
               </table>

           </div> 
        }
    </div>

谢谢。

Answer 1

单击时，Bootstrap 会查找具有唯一 ID 的对应 .tab-pane，不幸的是，ID不能包含空格。

您将在@qs.QuestionSectionName 的值通过循环时连字符。