关于tabs选项卡切换特效，在很久以前的一篇工作记录日志里，曾有记，见：tab切换js代码 笨拙却简单实用，然一切都在变化，html进化到了html5,css进化到了css3，jquery还是那个jquery，虽然有很多比它更牛的新事物出现并成为某种解决方案，然在网站的交互特效方面，jquery仍然有持久的生命力。
不多说了，今天帮客户制作营销网页时，弄了一个新的jquery+css3的tabs选项卡切换特效。参见下边url:
http://www.tjxhd.cn/topic/liuxue/meiguo.html
以下算是特色：
- 整体直观明了，风格简洁；
- 有指示“当前”的样式，也有前后箭头来“画蛇添足”；
- 当鼠标移动tab处，有css动画增光添彩；
只说不练，非好汉，下面是实际上如何使用的方式方法。
前端没有秘密，你可以扒前面的这个网址。或者下载最原始的。
https://pan.baidu.com/s/1eTT3DQU
最原始的长这样。
一看就知道，是国外良心人士之作。为互联网世界的繁荣昌盛（或制作信息垃圾）贡献了自己的那份力量。
怎么用。
1.资源复制，复制到你的网页页面所在的同一目录，特别注意是font目录，可别拉下。
2.前后代码，</head>里把css复制过去。把javascript代码放置最后面的</body>前（js代码后置利于网页打开速度，是优化的手段之一）
头部css:
<link rel='stylesheet prefetch' href='css/reset.css'>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
底部javascript：
<script src='js/stopExecutionOnTimeout.js?t=1'></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>
（注：这代码很牛的，华哥就算是学上几天，都未必能完全搞懂。）
3.复制<article>......</article>至页面html结构中的某个位置。
<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">美高申请流程</a></li>
<li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#FFF">美高申请条件</a></li>
<li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#FFF">美高申请时间</a></li>
<li><a href="#tab-4" tab-id="4" ripple="ripple" ripple-color="#FFF">美本申请条件</a></li>
<li><a href="#tab-5" tab-id="5" ripple="ripple" ripple-color="#FFF">美本申请时间</a></li>
<li><a href="#tab-6" tab-id="6" ripple="ripple" ripple-color="#FFF">美硕申请条件</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">
<ol>
<li>1.推荐符合条件的申请学校</li>
<li>2.填写申请表格，递交申请材料及申请费</li>
<li>3.安排面试（不包含无面试学校）</li>
<li> 4.获取面试结果（不包含无面试学校）</li>
<li>5.获得学校录取，填写录取协议</li>
<li>6.交纳押金，获得电子版I-20表格</li>
<li>7.填写后续表格</li>
<li>8.获取正式录取包（正式I-20）</li>
<li>9.获取签证／缴纳学费</li>
<li>10.安排住宿</li>
<li> 11.出境准备／学校安排接机 </li>
</ol>
</div>
<div tab-id="2" class="tab">
<p>国内就读7-11年级，年龄在11-17岁之间的在读生<br>
较强的英文能力，最好参加相应的语言考试<br>
要有较强的学习能力，成绩中上等水平<br>
家庭年收入在15w人民币以上<br>
</p>
</div>
<div tab-id="3" class="tab">
<p>3月：制定留学计划，加强英语学习，家庭资金规划<br>
6月：锁定4-10所目标学校，注册TOEFL考试<br>
7月：参加考试培训或自行集训，索取学校申请资料<br>
9月：注册SSAT，参加TOEFL考试，取得TOEFL分数后确认要申请的学校<br>
10月：准备填写申请资料<br>
11月：参加SSAT考试<br>
12月：要求就读学校向申请学校提供成绩单，缴纳申请费，电话面试<br>
次年1-2月：提交申请，申请跟踪<br>
次年3月：拿到学校offer，申请护照<br>
次年4月：签订入学合同，缴纳押金，拿到I-20，预定机票<br>
</p>
</div>
<div tab-id="4" class="tab">
<p>至少高中毕业，平均分80左右<br>
需要提供很好的硬件成绩（如高中成绩GPA，托福成绩，SAT成绩）<br>
需要学生有很好的软件条件（如参加过若干比赛，获得过奖项荣誉或者还有其他的特殊经历）<br>
学费15-20w人民币，生活费7-10w人民币<br>
</p>
</div>
<div tab-id="5" class="tab">
<p>3月：制定留学计划，加强英语学习，家庭资金规划<br>
5月：锁定8-12所目标学校，注册TOEFL考试，注册SAT考试<br>
6月：参加考试培训，索取学校申请资料，参加第一次SAT考试（建议）<br>
9月：参加TOEFL考试，取得分数后去定要申请的学校，开通学校网申系统，搜集各学校文书题目，开始构思和写作。<br>
10月：准备申请资料，如申请常规录取，可再次参加SAT考试，如分数等条件具备，计划申请EA/ED轮次，本月内需完成文书写作并提交网申表格。<br>
11月：如申请常规录取，可再次参加SAT考试，11月初或中旬EA/ED轮次申请截止<br>
12月：如申请常规录取，可再次参加SAT考试，要求就读学校向申请学校提供成绩单，如申请常规录取，本月内须提交网申系统并缴纳申请费，12月中旬EA/ED轮次申请结果发布<br>
次年1-2月：1月初或中旬本科常规申请截止，开始跟踪申请状态，保持每天登陆网申系统或申请用邮箱，查看学校通知<br>
次年3-4月：收到offer，拿到I-20表格<br>
5月：预约签证，签证准备<br>
6月：签证，购买机票<br>
7月：收拾行李，强化英语<br>
8月：根据学校开放时间抵达 </p>
</div>
<div tab-id="6" class="tab">
<p>国家承认的本科在读生<br>
TOEFL／IELTS, GRE/GMAT<br>
国内本科教育大四在读生或毕业生<br>
每年学费20-35w人民币，生活费10-12w人民币 </p>
</div>
</div>
</article>
（注：这里边要注意的，就是tab-id这个对应的数字，按顺序来，要增加就增加，要减少就减少，睁大眼睛，保持tabs选项条目与内容条目一一对应即可，就不会出乱子）
4.适当修改默认的css文件，让tabs选项切换卡与当前页面风格，宽度，文字大小等匹配。
最后，一古脑儿的通过ftp上传吧，在终极互联网环境看效果。
jquery+css3选项卡切换特效带动画 是不是爽爽的好用呢！
