UIkit的Switcher切换内容不显示，怎么解决？

Top丶张豪提问于 2026-02-19 01:52:26 阅读 36

组件

我在用UIkit的Switcher做选项卡切换时，点击标签后对应的内容区域一直空白。检查了HTML结构和类名都没问题，控制台也没报错，但内容就是不显示。

尝试过手动调用UIkit.update()和设置fixed高度，都没用。这是我的代码：


<div uk-switcher>
    <ul class="uk-tab" uk-tab>
        <li class="uk-active"><a href="#" rel="external nofollow"  rel="external nofollow" >Tab1</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow" >Tab2</a></li>
    </ul>
    <ul>
        <li>内容1</li>
        <li>内容2</li>
    </ul>
</div>

初始化时也用了UIkit.switcher('#selector')，但感觉初始化目标可能选错了？

我来解答赞 7 收藏

反馈

1 条解答

夏侯静静 Lv1

这个问题主要是HTML结构不对，UIkit的Switcher组件对DOM结构要求挺严格的。你把内容区域的

，然后给每个内容项加上uk-switcher-item类。

具体说下原因：Switcher组件默认是按div来定位内容区域的，用



<div uk-switcher>

    <ul class="uk-tab" uk-tab>

        <li class="uk-active"><a href="#">Tab1</a></li>

        <li><a href="#">Tab2</a></li>

    </ul>

    <div>

        <div class="uk-switcher-item">内容1</div>

        <div class="uk-switcher-item">内容2</div>

    </div>

</div>

uk-switcher

document.querySelector('[uk-switcher]')

2026-02-19 02:01