响应性布局设计的幻灯片我们介绍过了，而Tab选项卡也是可以制作成响应性布局的。今天跟大家分享一个使用CSS3动画加简单的jQuery代码实现的Responsive Tabs，代码十分简单，所以你修改起来会很方便的，下面大家一起看看响应性设计的Tab选项卡制作方法。
首先你可以看看：Demo →
响应性设计的Tab选项卡制作
在Demo例子中，我们使用了animate.css这个CSS3动画样式，当然你可以不使用。
STEP1: HTML代码
<div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class="current"><a href="#home">选项卡 一</a></li> <li><a href="#about">选项卡 二</a></li> <li><a href="#services">选项卡 三</a></li> <li><a href="#contact">选项卡 四</a></li> </ul> <!-- TAB 内容 --> <div id="content"> <div id="home" class="current"> <p>Hello, 设计达人！</p> </div> <div id="about"> <p>选项卡的内容 二</p> </div> <div id="services"> <p>选项卡的内容 三</p> </div> <div id="contact"> <p>选项卡的内容 四</p> </div> </div></div>
STEP2: 调用外部样式和相应的JS文件
「jquery.js」和「animate.css」为外部文件，不需要修改。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="js/script.js"></script><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/animate.css">
script.js和style.css代码下面会提到。
STEP3: CSS样式
以下为style.css的主要样式代码
#tabwrap { background: #fff; overflow: hidden; width: 600px; min-height: 300px; margin: 60px auto; box-shadow: 0 0 20px #ddd; border: 1px solid #ddd;}#tabs li { list-style: none; }#tabs li a { float: left; display: block; background: #777; padding: 10px; color: #fff; width: 25%; text-decoration: none; text-align: center; border-right: 1px solid #555; border-left: 1px solid #888; font-size: 15px; text-shadow: 1px 1px 0 #000;}#tabs li a:hover { background: #666; }#tabs li:first-child a { border-left: 0; }#tabs li:last-child a { border-right: 0; }#tabs li.current a { background: #fff; color: #666; text-shadow: 1px 1px 0 #fff;}#content > div { clear: both; padding: 20px; line-height: 19px; color: #666; text-shadow: 1px 1px 0 #fff; display: none;}#content .current { display: block; }#content #home.first { display: block; }#content p { margin: 0 0 20px 0;}
STEP4: 添加Javascript代码
以下为script.js文件的代码，其中fadeInLeft是animate.css动画的class类，你可以去掉或者换成其它，比如：「bounceIn」、「fadeInDown」、「fadeIn」等，变换十分简单哦！
$('#tabs li a').click(function(e){ $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft'); $(this).parent().addClass('current'); var currentTab = $(this).attr('href'); $(currentTab).addClass('current fadeInLeft'); e.preventDefault();});
好了，就这么简单的完成了一个响应性Tab选项卡，有空做做练习哦！查看本例Demo →
整理自：http://shanejeffers.com/blog/basictabs-simple-jquerycss3-solution
前有阻碍，奋力把它冲开，运用炙热的激情，
