<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>TAB特效</title>

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

</head>

<body>

<style type="text/css">

    *{padding:0; margin:0;}

    ul,ol{list-style-type:none;}

    body{font-size:12px;}

    .tab_box{width:500px; border:1px solid #000; margin:100px auto 0px  auto;}

    .tab_box ul{width:80px; height:400px; background-color:#eee; display:block; float:left;}

    .tab_box ul li{display:block; width:100%; height:40px; line-height:40px; text-align:center; background-color:#bbb; margin-top:10px; cursor:pointer;}

    .tab_box ul .tab_one{background-color:#abcdef;}

    .tab_span{width:410px; height:400px; overflow:hidden; border:1px solid #000; margin-left:5px; float:right;}

    .tab_span_c{width:100%; height:100%; background-color:#ccc; display:none;}

</style>

    <script type="text/javascript">

        $(document).ready(function(){

        $(".tab_box .tab_span .tab_span_c:first").css("display","block");

        $(".tab_box ul li").click(function(event){

            var $btnlistindex = $(this).index();

                $(".tab_box .tab_span .tab_span_c").eq($btnlistindex).show().siblings().hide();

                $(".tab_box ul li").eq($btnlistindex).addClass("tab_one").siblings().removeClass("tab_one");

                });

        });

    </script>

    <div class="tab_box">

        <ul>

            <li class="tab_one">选项按钮1</li>

            <li>选项按钮2</li>

            <li>选项按钮3</li>

            <li>选项按钮4</li>

            <li>选项按钮5</li>

        </ul>

        <div class="tab_span">

            <div class="tab_span_c">

                1sadfasdfasdf1sadfasdfasdf1sadfasdfasdf

            </div>

            <div class="tab_span_c">

                2sadfasdfasdf1sadfasdfasdf1sadfasdfasdf

            </div>

            <div class="tab_span_c">

                3sadfasdfasdf1sadfasdfasdf1sadfasdfasdf

            </div>

            <div class="tab_span_c">

                4sadfasdfasdf1sadfasdfasdf1sadfasdfasdf

            </div>

            <div class="tab_span_c">

                5sadfasdfasdf1sadfasdfasdf1sadfasdfasdf

            </div>

        </div>

    </div>

</body>

</html>

最终效果如下：

Jquery 简单的Tab选项卡特效的更多相关文章

  1. jquery简单实现tab选项卡效果

    html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...

  2. jQuery简单的轮播特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 简单竖向Tab选项卡

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  5. js 实现tab选项卡

    最近一直在研究js  如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧, 第一步:先把布局写出来: <div id="d ...

  6. 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 ...

  7. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  8. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

  9. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

随机推荐

  1. hdoj 2277 Change the ball【找规律】

    Change the ball Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  2. crontab使用--linux下的定时任务程序

    crontab是一个linux下的定时运行程序,如果我们想让自己的程序定时执行, 可以把自己的程序交给这个程序来完成 第一步:配置crontab的脚本的默认编辑器,它的默认的编辑器不好用,我们配置vi ...

  3. linux驱动开发之GCC问题

    最近正在学习驱动开发,进展到字符设备驱动开发阶段. 先不多说,首先把刚看的一篇学习驱动步骤的帖子记录如下: 1. 学会写简单的makefile 2. 编一应用程序,可以用makefile跑起来 3. ...

  4. mysql 导出，导入数据

     导出     加-d代表只导出表结构 命令行下具体用法如下:  mysqldump -u用户名 -p密码 -d 數據库名 表名 脚本名; 1.导出数据库为dbname的表结构(其中用户名为root, ...

  5. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

  6. OMCS的语音视频带宽占用

    OMCS的语音.视频.电子白板.远程桌面等功能对网络带宽的要求分别如何了? 我们先假设一种常见的场景:假设N个在线用户同时进行1对1的多媒体沟通(即分为N/2组),在不考虑P2P通道的情况下,带宽的大 ...

  7. 超人学院Hadoop大数据资源分享

    超人学院Hadoop大数据资源分享 http://bbs.superwu.cn/forum.php?mod=viewthread&tid=770&extra=page%3D1 很多其它 ...

  8. 【Linux常用工具】1.1 diff命令的三种格式

    diff是用来比较两个文本文件的差异的工具,它有三种格式,下面用实例介绍一下: 准备三个测试文件1.txt 2.txt 3.txt bixiaopeng@bixiaopengtekiMacBook-P ...

  9. ThinkPHP 中M方法和D方法的具体区别(转)

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  10. C#开发学习——内联表达式

    <%@ 表示:引用 <%# 表示:绑定 <%= 表示:取值     <%= 变量名%> Response.Write()输出和<%=%>输出最后的效果是一样的 ...