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>
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0