UIKit v3 选项卡不起作用

Question

我开始使用 UIKit (v3)，我真的很喜欢它。但是无论我尝试多少，我都无法使用 uk-tab。 In this pen我有我正在尝试制作的代码，你可以很容易地看到 (1) uk-active 类什么都不做，(2) 选项卡的内容部分没有显示和 (3) 单击任何选项卡中的项不执行任何操作。我尝试了 switcher 和 tab 文档中的所有内容。这是一个错误还是我做错了什么？谢谢。

<div uk-grid>
        <div class="uk-width-auto">
            <ul class="uk-tab-left" uk-tab="connect: #datas">
                <li><a class="uk-active" href="#">Domingo (20/08)</a></li>
                <li><a href="#">Segunda (21/08)</a></li>
                <li><a href="#">Terça (22/08)</a></li>
                <li><a href="#">Quarta (23/08)</a></li>
                <li><a href="#">Quinta (24/08)</a></li>
                <li><a href="#">Sexta (25/08)</a></li>
                <li><a href="#">Sábado (26/08)</a></li>
            </ul>
        </div>
        <div class="uk-width-expand">
            <ul id="datas" class="uk-switcher">
                <li>
                    <ul class="uk-list"> <!-- Domingo -->
                        <li><strong>20h:</strong> Abertura com Concerto/Palestra na Igreja, sob a regência do Prof. Dr. Jetro, que apresentará e executará hinos compostos no contexto da Reforma</li>
                    </ul>
                </li>
                <li>
                    <ul class="uk-list"> <!-- Segunda -->
                        <li><strong>18h40:</strong> Credenciamento a partir das inscrições feitas anteriormente, via site</li>
                        <li><strong>19h30:</strong> Meditação e oração</li>
                        <li><strong>19h40:</strong> Conferência I: História e Teologia da Reforma</li>
                    </ul>
                </li>
                <li>
                    <ul class="uk-list"> <!-- Terça -->
                        <li><strong>16h45:</strong> Meditação e oração.</li>
                        <li><strong>16h55:</strong> Conferência II: Reforma e Educação</li>
                    </ul>
                </li>
                <li>
                    <ul class="uk-list"> <!-- Quarta -->
                        <li><strong>14h:</strong> Grupos de trabalho</li>
                        <li><strong>19h30:</strong> Meditação e oração</li>
                        <li><strong>19h40:</strong> Conferência III: Reforma e Eclesiologia</li>
                    </ul>
                </li>
                <li>
                    <ul class="uk-list"> <!-- Quinta -->
                        <li><strong>14h:</strong> Grupos de trabalho</li>
                        <li><strong>19h30:</strong> Meditação e oração</li>
                        <li><strong>19h40:</strong> Conferência IV: Reforma e Tradução</li>
                    </ul>
                </li>
                <li>
                    <ul class="uk-list"> <!-- Sexta -->
                        <li><strong>20h:</strong> Culto na igreja, com ênfase nos hinos do hinário acerca do tema do evento</li>
                    </ul>
                </li>
                <li>
                    <ul class="uk-list"> <!-- Sábado -->
                        <li><strong>8h30 e 10h30:</strong> Encerramento do evento com sermão temático preparado pelo Pr. Dr. Jimmy</li>
                        <li><strong>16h45:</strong> Culto Jovem, com a projeção de excertos do filme Lutero, de Eric Till, 2003. Após o filme, mesa-redonda com a participação de professores dos cursos de História , Teologia e Rádio e TV. </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

Answer 1

(1) uk-active 类什么都不做

您必须将类添加到<li>，而不是<a>。然后它将生成以下 CSS，这会影响<a>：

.uk-tab > .uk-active > a {
    color: #333;
    border-color: #1e87f0;
}

---

(2) 选项卡的内容部分未显示，(3) 单击选项卡中的任何项都不会执行任何操作

这个花了我一段时间，因为我以前没有使用过 uikit，问题是由 uikit 中的错误引起的。如果只是把.uk-tab-left改成.uk-tab就可以了，于是我搜索了相关问题，找到了bug report on GitHub。当[他试图]将选项卡列表放在内容的左侧时，作者将其缩小到 uk-tab-left 类。这是26天前。 bug was fixed 5 days ago，所以它会在 uikit 的下一个版本中。

这是一个 updated Codepen，它只将错误修复应用于 javascript。