默认情况下,二者各为一个 ul 同级并列,无需特殊设置即可直接实现 tab 切换。但当 uk-tab 在一个 div 里面,uk-switcher 在另外一个 div 里面的时候,它们之间就失去联络了。

这时需要在 uk-tab 上添加 uk-switcher="connect: #detail",同时在 uk-switcher 上添加 id="detail",这样就可以实现标签切换了。

<div id="tab" class="uk-position-bottom">
    <ul class="uk-flex-center" uk-switcher="connect: #detail" uk-tab>
        <li class="left"><a href="#">报名</a></li>
        <li class="right"><a href="#">详情</a></li>
    </ul>
</div>
<div id="content">
    <ul id="detail" class="uk-switcher">
        <li>A</li>
        <li>B</li>
    </ul>
</div>