uikit选项卡tab效果代码-html代码-BFW代码库

uikit选项卡tab效果代码

代码语言：html

所属分类：选项卡

代码描述：uikit选项卡tab效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <!-- UIkit CSS -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uikit.min.css">


</head>

<body>
    <div class="uk-container uk-container-center">
        <h3 class="uk-margin-top">Tab autoplayer</h3>
        <ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
            <li><a href="">Tab 1</a></li>
            <li><a href="">Tab 2</a></li>
            <li><a href="">Tab 3</a></li>
        </ul>
        <ul id="my-id" class="uk-switcher uk-margin">
            <li>
                <a href="#" id="autoplayer" data-uk-switcher-item="next"></a>
                This slide contains a hidden link, that selects the next slide when clicked. The click is simulated by jacascript to mimic autoplay.
            </li>
            <li>Content 2</li>
            <li>Content 3</li>
        </ul>

        <h3>Load with second tab active</h3>
        <ul class="uk-tab" data-uk-tab="{connect:'#my-id2'}">
            <li><a href="">Tab 1</a></li>
            <li class="uk-active"><a href="">Tab 2</a></li>
            <li><a href="">Tab 3</a></li>
        </ul>
        <ul id="my-id2" class="uk-switcher uk-margin">
            <li>Content 1</li>
            <li>Content 2 (first open) just add <code> class="uk-active"</code> to the active tab.</li>
            <li>Content 3</li>
        </ul>

        <h3>Load from url</h3>
        <ul class="uk-tab" data-uk-tab="{connect:'#my-id3'}">
            <li id="tab1"><a href="">Tab 1</a></li>
            <li id="tab2"><a href="">Tab 2</a></li>
            <li id="tab3"><a href="">Tab 3</a></li>
        </ul>
        <ul id="my-id3" class="uk-switcher uk-margin&quo.........完整代码请登录后点击上方下载按钮下载查看