Question

我开始使用UIKit（v3），我真的很喜欢它。但无论我尝试多少，我都不能使用uk-tab。 In this pen我有我正在尝试制作的代码，你可以很容易地看到（1）uk-active类什么都不做，（2）选项卡的内容部分没有显示，（3）点击在选项卡中的任何itens什么也没做。我在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的错误修复。

UIKit v3 Tab不起作用

1 个答案: