<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扁平实用Tabs选项卡特效 - 网页模板</title>
<link rel='stylesheet prefetch' href='css/reset.css'>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet prefetch' href='https://fonts.useso.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<article class="htmleaf-container">
<div class="tabs">
<div class="tabs-header">
<div class="border"></div>
<ul>
<li class="active"><a href="#tab-1" tab-id="1" ripple="ripple" ripple-color="#FFF">Tab 1</a></li>
<li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#FFF">Tab 2</a></li>
<li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#FFF">Tab 3</a></li>
<li><a href="#tab-4" tab-id="4" ripple="ripple" ripple-color="#FFF">Tab 4</a></li>
<li><a href="#tab-5" tab-id="5" ripple="ripple" ripple-color="#FFF">Tab 5</a></li>
</ul>
<nav class="tabs-nav"><i id="prev" ripple="ripple" ripple-color="#FFF" class="material-icons"></i><i id="next" ripple="ripple" ripple-color="#FFF" class="material-icons"></i></nav>
</div>
<div class="tabs-content">
<div tab-id="1" class="tab active">1. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Ellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.</div>
<div tab-id="2" class="tab">2. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam.</div>
<div tab-id="3" class="tab">3. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.</div>
<div tab-id="4" class="tab">4. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</div>
<div tab-id="5" class="tab">5. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</div>
</div>
</div>
</article>
<script src='js/stopExecutionOnTimeout.js?t=1'></script>
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script>
$(document).ready(function () {
var activePos = $('.tabs-header .active').position();
function changePos() {
activePos = $('.tabs-header .active').position();
$('.border').stop().css({
left: activePos.left,
width: $('.tabs-header .active').width()
});
}
changePos();
var tabHeight = $('.tab.active').height();
function animateTabHeight() {
tabHeight = $('.tab.active').height();
$('.tabs-content').stop().css({ height: tabHeight + 'px' });
}
animateTabHeight();
function changeTab() {
var getTabId = $('.tabs-header .active a').attr('tab-id');
$('.tab').stop().fadeOut(300, function () {
$(this).removeClass('active');
}).hide();
$('.tab[tab-id=' + getTabId + ']').stop().fadeIn(300, function () {
$(this).addClass('active');
animateTabHeight();
});
}
$('.tabs-header a').on('click', function (e) {
e.preventDefault();
var tabId = $(this).attr('tab-id');
$('.tabs-header a').stop().parent().removeClass('active');
$(this).stop().parent().addClass('active');
changePos();
tabCurrentItem = tabItems.filter('.active');
$('.tab').stop().fadeOut(300, function () {
$(this).removeClass('active');
}).hide();
$('.tab[tab-id="' + tabId + '"]').stop().fadeIn(300, function () {
$(this).addClass('active');
animateTabHeight();
});
});
var tabItems = $('.tabs-header ul li');
var tabCurrentItem = tabItems.filter('.active');
$('#next').on('click', function (e) {
e.preventDefault();
var nextItem = tabCurrentItem.next();
tabCurrentItem.removeClass('active');
if (nextItem.length) {
tabCurrentItem = nextItem.addClass('active');
} else {
tabCurrentItem = tabItems.first().addClass('active');
}
changePos();
changeTab();
});
$('#prev').on('click', function (e) {
e.preventDefault();
var prevItem = tabCurrentItem.prev();
tabCurrentItem.removeClass('active');
if (prevItem.length) {
tabCurrentItem = prevItem.addClass('active');
} else {
tabCurrentItem = tabItems.last().addClass('active');
}
changePos();
changeTab();
});
$('[ripple]').on('click', function (e) {
var rippleDiv = $('<div class="ripple" />'), rippleOffset = $(this).offset(), rippleY = e.pageY - rippleOffset.top, rippleX = e.pageX - rippleOffset.left, ripple = $('.ripple');
rippleDiv.css({
top: rippleY - ripple.height() / 2,
left: rippleX - ripple.width() / 2,
background: $(this).attr('ripple-color')
}).appendTo($(this));
window.setTimeout(function () {
rippleDiv.remove();
}, 1500);
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
扁平实用Tabs选项卡特效.zip
版权申诉
49 浏览量
2022-11-25
10:22:05
上传
评论
收藏 104KB ZIP 举报
扁平实用Tabs选项卡特效.zip （11个子文件） 
扁平实用Tabs选项卡特效 jiaoben3818 css 
reset.css 773B default.css 6KB styles.css 3KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 7KB js stopExecutionOnTimeout.js 2KB jquery-2.1.1.min.js 82KB
扁平实用Tabs选项卡特效.jpg 79KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- Music-Player +PlayerActivity+ rockplayer+ SeeJoPlayer 播放器JAVA源码
- vscode-1.46.0.tar源码文件
- 最近很火植物大战僵尸杂交版2.08苹果+安卓+PC+防闪退工具V2+修改工具+高清工具+通关存档整合包更新
- 超级好用的截图工具PixPin，可录制Gif图
- Screenshot_2024-05-21-17-06-42-64_2332cb9b27b851b548ba47a91682926c.jpg
- 毕业设计参考 - 基于树莓派、OpenCV及Python的人脸识别
- node-v18.20.2-linux-arm64
- 222222222222
- 16张相机标定图片，可复现本文畸变矫正
- dbeaver-ce-23.3.1-x86_64-setup.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
