java - URL 中带有空格的 Bootstrap 选项卡

Question

我稍微修改了 Bootstrap 选项卡，以便它们从 Controller 中提取 ID 而不是指定它们。

这一切都运行良好，但是一些 ID 的单词之间有空格。这导致这些选项卡不起作用。

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

这是我的代码:

<!-- 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 通过循环时，您将用连字符连接它的值。