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

下面来看动态效果：

一、主体程序

<!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. 如何通过ShareSDK的 Unity3D快速接入Android/iOS分享与授权

    Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎:在游戏 ...

  2. Codeforces Gym - 101147G The Galactic Olympics

    Discription Altanie is a very large and strange country in Mars. People of Mars ages a lot. Some of ...

  3. Akka简介与Actor模型

    Akka是一个构建在JVM上,基于Actor模型的的并发框架,为构建伸缩性强,有弹性的响应式并发应用提高更好的平台.本文主要是个人对Akka的学习和应用中的一些理解. Actor模型 Akka的核心就 ...

  4. python pip包管理器安装

    下载   http://peak.telecommunity.com/dist/ez_setup.py 执行:python ez_setup.py 下载:  http://pypi.python.or ...

  5. CEF General Usage(CEF3预览)

    CEF General Usage(CEF3预览) 介绍 CEF全称Chromium Embedded Framework,是一个基于Google Chromium 的开源项目.Google Chro ...

  6. 第四期coding_group笔记_用CRF实现分词-词性标注

    一.背景知识 1.1 什么是分词? NLP的基础任务分为三个部分,词法分析.句法分析和语义分析,其中词法分析中有一种方法叫Tokenization,对汉字以字为单位进行处理叫做分词. Example ...

  7. javascript --- 原型继承与属性拷贝的综合应用

    对于继承来说,主要目标就是将一些现有的功能据为己有.也就是说,我们在新建一个对象的时候,通常首先继承现有对象,然后再为其添加额外的属性和方法. 对此,我们可以通过一个函数调用来完成. 具体而言就是: ...

  8. Linux内核源码分析--内核启动之zImage自解压过程

    参考: http://blog.chinaunix.net/uid-20543672-id-3018233.html Linux内核编译流程分析 linux2.6内核启动分析--李枝果(不看是你的损失 ...

  9. java计算年龄

    精确到天计算年龄 public static int getAgeByCardId(String card) throws Exception { Integer len = card.length( ...

  10. GOF 23种设计摩搜-建造者模式

    • 场景: – 我们要建造一个复杂的产品.比如:神州飞船,Iphone.这个复杂的产品的创建.有这样 一个问题需要处理: • 装配这些子组件是不是有个步骤问题? – 实际开发中,我们所需要的对象构建时 ...