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

下面来看动态效果：

一、主体程序

<!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. about乘法逆元

    本博客部分摘自   hwim 定义 乘法逆元的定义:若存在正整数a,b,p, 满足ab = 1(mod p), 则称a 是b 的乘法逆元, 或称b 是a 的乘法逆元.b ≡ a-1 (mod p),a ...

  2. bzoj 1453: [Wc]Dface双面棋盘

    1453: [Wc]Dface双面棋盘 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 617  Solved: 317[Submit][Status][ ...

  3. JNA 相关问题

    JNA 相关问题 结构体对齐问题 要注意调用的c库字段对齐方式的相关设置. #pragma pack (push,1) #pragma pack(pop) jna中提供了4种对齐方式: /** Use ...

  4. 小W计树

    排列组合思想. 先跑一遍最短路, 再从1节点开始搜索, 假如搜到一个点的路径长度等于最短路, 则记录到达该点的路径数 + 1. 最后遍历一遍, ans *= rec[i] 输出答案即可. 关键在于想到 ...

  5. PyTorch学习笔记之计算图

    1. **args, **kwargs的区别 def build_vocab(self, *args, **kwargs): counter = Counter() sources = [] for ...

  6. this.class.getClassLoader().getResourceAsStream

    this.getClass().getClassLoader().getResource("template");    首先,调用对象的getClass()方法是获得对象当前的类 ...

  7. Life of an Oracle I/O: tracing logical and physical I/O with systemtap

    https://db-blog.web.cern.ch/blog/luca-canali/2014-12-life-oracle-io-tracing-logical-and-physical-io- ...

  8. Spring异步任务处理，@Async的配置和使用

    本文转自http://blog.csdn.net/clementad/article/details/47403185 感谢作者 这个注解用于标注某个方法或某个类里面的所有方法都是需要异步处理的.被注 ...

  9. Android Studio apk 打包流程（转）http://blog.chinaunix.net/uid-26000296-id-5567890.html

    1.Build -> Generate Signed APK...,打开如下窗口 2.假设这里没有打过apk包,点击Create new,窗口如下 这里只要输入几个必要项 Key store p ...

  10. 自定义PropertyGrid控件【转】

    自定义PropertyGrid控件 这篇随笔其实是从别人博客上载录的.感觉很有价值,整理了一下放在了我自己的博客上,希望原作者不要介意. 可自定义PropertyGrid控件的属性.也可将属性名称显示 ...