元素
元素
工具
博客
问答

UIkit Switcher切换后内容不显示怎么办？

爱学习的海燕 阅读 5
组件

我在用 UIkit 的 Switcher 做一个选项卡切换，点击 tab 能高亮，但对应的内容区域始终是空白的，根本没切换出来。

HTML 结构是照着官方文档写的，也引入了 uikit.min.js，但就是不生效。是不是漏了什么初始化步骤？

<ul uk-switcher="connect: #my-content">
  <li><a href="#" rel="external nofollow"  rel="external nofollow" >Tab 1</a></li>
  <li><a href="#" rel="external nofollow"  rel="external nofollow" >Tab 2</a></li>
</ul>

<ul id="my-content" class="uk-switcher uk-margin">
  <li>内容一</li>
  <li>内容二</li>
</ul>
UIkit前端框架
我来解答 赞 2 收藏
二维码
手机扫码查看
反馈
1 条解答
UI钰曦
UI钰曦 Lv1
看起来你已经在 HTML 结构上做得很对了，但有时候小细节会导致问题。建议检查一下是否正确引入了 UIkit 的 CSS 文件，因为只有样式文件正确加载，内容才能正确显示。另外，确保你的 JavaScript 文件路径没有问题，虽然你提到已经引入了 uikit.min.js，但最好再确认一下。如果这些都没有问题，可以尝试手动初始化一下 Switcher，代码如下：

document.addEventListener('DOMContentLoaded', function () {

    var switcher = UIkit.switcher('#my-content');

});


这段代码会在 DOM 完全加载后初始化 Switcher，有时候自动初始化会因为时机问题导致失效。希望这能解决问题，如果还不行的话，检查控制台有没有报错信息，可能会有有用的线索。
点赞
2026-03-20 16:03
相关推荐
元素
元素
工具
博客
问答
登录/注册