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

Question

我对Bootstrap选项卡做了一些修改，以便它们从控制器中提取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遍历循环时为其加一个连字符。