最近公司有个页面正好用到了选项卡，我就写了一下，感觉还不错，都挺简单的.

下面来看动态效果：

一、主体程序

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>选项卡</title>

        <link type="text/css" rel="stylesheet" href="css/layout.css" />

    </head>

    <body>

        <!--整体构局说明，用ul完成按钮的横向布局，用div完成三个内容框架的垂直布局（类似于类表），然后将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来-->

        <div class="tab">

            <div class="tab_menu">

            <ul>

                <li class="on">实事</li>

                <li>政治</li>

                <li>体育</li>

            </ul>

            </div>

            <div class="tab_box">

                <div>实事内容</div>

                <div>政治内容</div>

                <div>体育内容</div>

            </div>

        </div>

        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

        <script type="text/javascript" src="js/layout.js"></script>

    </body>

</html>

二、CSS样式

初步布局代码：

*{ margin:0; padding:0}

ul{

    list-style: none;

}

.tab{

    width: 300px;

    margin: 0 auto;

}

.tab .tab_menu{

    border: 1px solid #000000;

    height: 30px;

    width: 300px;

}

.tab .tab_menu ul li{

    float: left;

    width: 99px;

    text-align: center;

    line-height: 30px;

    border-right: 1px #333333 solid;

}

.tab .tab_menu ul li:last-child{

    border-right:none;

    width: 100px;

}

.tab .tab_menu ul li.on{

    background: #999;

}

.tab .tab_box > div{

    width: 300px;

    height: 200px;

    border: #333333 solid;

    border-width: 0 1px 1px 1px;

}

上面代码实现的布局图如下：

但是我们只需要一个框架里面的内容进行显示，所以在上面代码的前提下添加一些小代码辅助就可以了.

进一步布局样式代码：

*{ margin:0; padding:0}

ul{

    list-style: none;

}

.tab{

    width: 300px;

    margin: 0 auto;

}

.tab .tab_menu{

    border: 1px solid #000000;

    height: 30px;

    width: 300px;

}

.tab .tab_menu ul li{

    float: left;

    width: 99px;

    text-align: center;

    line-height: 30px;

    border-right: 1px #333333 solid;

}

.tab .tab_menu ul li:last-child{

    border-right:none;

    width: 100px;

}

.tab .tab_menu ul li.on{

    background: #999;

}

.tab .tab_box > div{

    width: 300px;

    height: 200px;

    border: #333333 solid;

    border-width: 0 1px 1px 1px;

    display: none;                    //将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来

}

.tab .tab_box > div:first-child{

    display: block;

}

上面程序给.tab .tab_box > div样式多添加了一个display：none，另外还通过:first-child属性只将第一个框架内容显示出来,这样我们看到的布局就和我上面刚开始放的动画效果图保持一致了，布局也算是完成了.

三、Jquery代码：

$(function(){

    $(".tab_menu ul li").click(function(){

        $(this).addClass("on").siblings().removeClass("on");    //切换选中的按钮高亮状态

        var index=$(this).index();   //获取被按下按钮的索引值，需要注意index是从0开始的

        $(".tab_box > div").eq(index).show().siblings().hide();  //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容

    });

});

额，看到那么短的Jquery代码我也是醉了，布局写了那么长一段代码，Jquery只写了5句话就搞定了,注释我已经写的很清楚了，感兴趣的可以看看吧.

jquery特效（2）—选项卡的更多相关文章

  1. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  2. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  3. js进阶 11-24 jquery如何实现选项卡的制作

    js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...

  4. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  5. 图片左右间隔滚动Jquery特效

    图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...

  6. Web设计师值得收藏的10个jQuery特效

    jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...

  7. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  8. jQuery 特效：盒子破碎和移动动画效果

    今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...

  9. JQuery特效分享网站

    各种jquery特效分享,可以去上面找资源. http://www.jqshare.com/

  10. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

随机推荐

  1. ML | PCA

    what's xxx PCA principal components analysis is for dimensionality reduction. 主要是通过对协方差矩阵Covariance ...

  2. jenkins发布普通项目、配置自动上线自动部署

    1.以root用户运行jenkins是不专业的 刚开始用jenkins时用jenkins这个普通用户运行程序,始终无法连接到gitlab,报错如下: 先是把修改jenkins上的git路径,将git修 ...

  3. javascript 对象初探 （六）--- call()和apply()初探

    在javascript中,每个函数都具有call()和apply()两个方法,您可以用她们来触发函数,并指定相关的调用参数. 此外,这两个方法还有另一个功能,就是她可以让一个对象去‘借用‘另一个对象的 ...

  4. Silverlight 离线安装包

    直接下载地址 https://www.microsoft.com/getsilverlight/locale/en-us/html/Microsoft%20Silverlight%20Release% ...

  5. 投资人王刚口述：滴滴如何用八十万成为百亿美金公司？ zz

    作者|李好福布斯杂志中文版采编 阿里巴巴前高管.滴滴打车天使投资人王刚近日在杭州接受了<福布斯>独家专访,讲述了集齐“阿里的人.百度的技术.腾讯的钱”的滴滴如何从八十万启动资金,在三年内成 ...

  6. Celery 启动报错 can_read() got an unexpected keyword argument timeout

    问题: Celery 启动报错 can_read() got an unexpected keyword argument timeout 方案:更改redis版本和celery版本,我使用下面的ce ...

  7. MachineLearningInAction

    2017-01-07 20:14:45 前面两周主要都是在复习然后考试,每天其实过得也挺苦逼的.基本上项目和学习上的是都没有接触了:复习了随机过程和数字信号处理和信号检测和估值:主要都是复习一些理论上 ...

  8. ffmpeg一些filter使用方法、以及一些功能命令

    1.加字幕 命令:ffmpeg -i <input> -filter_complex subtitles=filename=<SubtitleName>-y <outpu ...

  9. vue2.0 + vux （六）NewsList 资讯页 及 NewsDetail 资讯详情页

    设置代理,避免出现跨域问题 /*设置代理,避免出现跨域问题*/ proxyTable: { '/api':{ target: 'https://www.oschina.net/action/apiv2 ...

  10. mysql: 关于MySQL InnoDB锁行还是锁表?

          baidu zone - 关于MYSQL Innodb 锁行还是锁表,深入讲解