响应性设计的Tab选项卡 – Basic Tabs

Sponsor

响应性布局设计的幻灯片我们介绍过了，而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

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。