<!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>jQuery扁平水平滑动Tab选项卡 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href='http://fonts.useso.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<nav class="nav nav--active">
<ul class="nav__list">
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color1" data-letter="a"></div>
<p class="nav__label">About</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color2" data-letter="p"></div>
<p class="nav__label">Products</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color3" data-letter="q"></div>
<p class="nav__label">Questions</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color4" data-letter="e"></div>
<p class="nav__label">Events</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color5" data-letter="s"></div>
<p class="nav__label">Sponsors</p>
</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">
<div class="nav__thumb color6" data-letter="c"></div>
<p class="nav__label">Contact</p>
</a>
</li>
</ul>
<div class="burger burger--close">
<div class="burger__patty"></div>
</div>
</nav>
<div class="page">
<section class="section section--active color1" data-letter="a">
<header class="htmleaf-header">
<h1>支持键盘控制的扁平风格水平滑动Tab选项卡 <span></span></h1>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</header>
</section>
<section class="section color2" data-letter="p">
<article class="section__wrapper">
<h1 class="section__title">Products</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Quos vel omnis quibusdam at inventore atque assumenda dignissimos ipsa magni perferendis, minima neque saepe reprehenderit quisquam numquam voluptas quo placeat quaerat!</p>
</article>
</section>
<section class="section color3" data-letter="q">
<article class="section__wrapper">
<h1 class="section__title">Questions</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Labore iure tempora magnam aliquid voluptatum sit placeat necessitatibus, adipisci est, ipsum doloremque. Id quia consequatur labore repellendus. Ab eligendi voluptatibus doloribus.</p>
</article>
</section>
<section class="section color4" data-letter="e">
<article class="section__wrapper">
<h1 class="section__title">Events</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Earum porro, at odit. Dolorem velit asperiores quam obcaecati ex numquam aspernatur at et! Possimus blanditiis, distinctio est qui deleniti nisi dolorem!</p>
</article>
</section>
<section class="section color5" data-letter="s">
<article class="section__wrapper">
<h1 class="section__title">Sponsors</h1>
<p>Use your 'left' and 'right' arrow keys to navigate.<br> Autem alias perferendis facilis, quibusdam, ratione repellendus, voluptate officiis ipsa ullam magnam libero atque doloribus sunt est ea nisi iste porro excepturi.</p>
</article>
</section>
</div>
<script src='js/stopExecutionOnTimeout.js'></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
var Nav = function () {
var nav = $('.nav'), burger = $('.burger'), page = $('.page'), section = $('.section'), link = nav.find('.nav__link'), navH = nav.innerHeight(), isOpen = true, hasT = false;
var toggleNav = function () {
nav.toggleClass('nav--active');
burger.toggleClass('burger--close');
shiftPage();
};
var shiftPage = function () {
if (!isOpen) {
page.css({
'transform': 'translateY(' + navH + 'px)',
'-webkit-transform': 'translateY(' + navH + 'px)'
});
isOpen = true;
} else {
page.css({
'transform': 'none',
'-webkit-transform': 'none'
});
isOpen = false;
}
};
var switchPage = function (e) {
var self = $(this);
var i = self.parents('.nav__item').index();
var s = section.eq(i);
var a = $('section.section--active');
var t = $(e.target);
if (!hasT) {
if (i == a.index()) {
return false;
}
a.addClass('section--hidden').removeClass('section--active');
s.addClass('section--active');
hasT = true;
a.on('transitionend webkitTransitionend', function () {
$(this).removeClass('section--hidden');
hasT = false;
a.off('transitionend webkitTransitionend');
});
}
return false;
};
var keyNav = function (e) {
var a = $('section.section--active');
var aNext = a.next();
var aPrev = a.prev();
var i = a.index();
if (!hasT) {
if (e.keyCode === 37) {
if (aPrev.length === 0) {
aPrev = section.last();
}
hasT = true;
aPrev.addClass('section--active');
a.addClass('section--hidden').removeClass('section--active');
a.on('transitionend webkitTransitionend', function () {
a.removeClass('section--hidden');
hasT = false;
a.off('transitionend webkitTransitionend');
});
} else if (e.keyCode === 39) {
if (aNext.length === 0) {
aNext = section.eq(0);
}
aNext.addClass('section--active');
a.addClass('section--hidden').removeClass('section--active');
hasT = true;
aNext.on('transitionend webkitTransitionend', function () {
a.removeClass('section--hidden');
hasT = false;
aNext.off('transitionend webkitTransitionend');
});
} else {
return;
}
}
};
var bindActions = function () {
burger.on('click', toggleNav);
link.on('click', switchPage);
$(document).on('ready', function () {
page.css({
'transform': 'translateY(' + navH + 'px)',
'-webkit-transform': 'translateY(' + navH + 'px)'
});
});
$('body').on('keydown', keyNav);
};
var init = function () {
bindActions();
};
return { init: init };
}();
Nav.init();
</script>
</body>
</html>
jQuery扁平水平滑动Tab选项卡.zip （10个子文件） 
jQuery扁平水平滑动Tab选项卡 
jQuery扁平水平滑动Tab选项卡.jpg 18KB jiaoben3592 css 
default.css 6KB styles.css 7KB 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资源评论
