uikit选项卡tab效果代码

代码语言:html

所属分类:选项卡

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

代码标签: 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>
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0