下面是闭包做选项卡：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>闭包做选项卡</title>

    <style type="text/css">

        .btns{

            width:500px;

            height:50px;

        }

        .btns input{

            width:100px;

            height:50px;

            background-color: #ddd;

            color:#666;

            border:0;

        }

        .btns input.cur{

            background-color: gold;

        }

        .contents div{

            width:500px;

            height:300px;

            background-color: gold;

            display: none;

            line-height:300px;

            text-align: center;

        }

        .contents div.active{

            display: block;

        }

    </style>

    <script type="text/javascript">

        window.onload = function(){

            var aBtn = document.getElementById('btns').getElementsByTagName('input');

            var aContent = document.getElementById('contents').getElementsByTagName('div');

            //用闭包存起来，这个i就有1，2，3这个值了，不过实际中不这样用，小题大做了

            for(var i=0;i<aBtn.length;i++){

                (function (i) {

                    aBtn[i].onclick = function () {

                        for(var j=0;j<aBtn.length;j++){

                            aBtn[j].className = '';

                            aContent[j].className = '';

                        }

                        this.className = 'cur';

                        aContent[i].className = 'active';

                    }

                })(i)

            }

        }

    </script>

</head>

<body>

    <div class="btns" id="btns">

        <input type="button" value="tab01" class="cur">

        <input type="button" value="tab02">

        <input type="button" value="tab03">

    </div>

    <div class="contents" id="contents">

        <div class="active">tab文字内容一</div>

        <div>tab文字内容二</div>

        <div>tab文字内容三</div>

    </div>

</body>

</html>

jquery库做选项卡：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js库做选项卡</title>

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

    <style type="text/css">

        .btns{

            width:500px;

            height:50px;

        }

        .btns input{

            width:100px;

            height:50px;

            background-color: #ddd;

            color:#666;

            border:0;

        }

        .btns input.cur{

            background-color: gold;

        }

        .contents div{

            width:500px;

            height:300px;

            background-color: gold;

            display: none;

            line-height:300px;

            text-align: center;

        }

        .contents div.active{

            display: block;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $('#btns input').click(function(){

                //this是原生的对象

                $(this).addClass('cur').siblings().removeClass('cur');

                //alert($(this).index())弹出索引值

                $('#contents div').eq($(this).index()).addClass('active').
　　　　　　　　　　siblings().removeClass('active')

            })

        })

    </script>

</head>

<body>

    <div class="btns" id="btns">

        <input type="button" value="tab01" class="cur">

        <input type="button" value="tab02">

        <input type="button" value="tab03">

    </div>

    <div class="contents" id="contents">

        <div class="active">tab文字内容一</div>

        <div>tab文字内容二</div>

        <div>tab文字内容三</div>

    </div>

</body>

</html>

jquery——选项卡的更多相关文章

  1. 实用的Jquery选项卡TAB

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

  2. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  3. click事件和jquery选项卡

    一. click事件 实现效果是点击切换按钮,可以重复的切换背景色 <!DOCTYPE html> <html lang="en"> <head> ...

  4. jQuery选项卡tabulous

    jQuery选项卡tabulous,jQuery,选项卡,tab标签切换代码,扁平设计,jQuery选项卡tabulous是一款支持Scale.Slide.Scale Up.Flip等效果jquery ...

  5. 简单的jquery选项卡效果

    html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...

  6. jquery选项卡

    用jquery实现选项卡功能 css部分: html部分: 记得一定要引入jquery文件 jquery部分:

  7. jQuery选项卡插件

    html结构 <ul id="tabs" class="tabs"> <li data-tab="users">Us ...

  8. javascript与jQuery选项卡效果

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  9. 【特效】jquery选项卡插件，页面多个选项卡统一调用

    把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用.代码的具体注意事项已经写进注释了.用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本 ...

随机推荐

  1. 在Eclipse中用JDBC连接Mysql数据库

    一.配置要求 JDK(下载http://www.oracle.com/technetwork/java/javase/downloads/index.html) Mysql(下载http://www. ...

  2. DDoS攻防战（二）：CC攻击工具实现与防御理论--删除

    我们将要实现一个进行应用层DDoS攻击的工具,综合考虑,CC攻击方式是最佳选择,并用bash shell脚本来快速实现并验证这一工具,并在最后,讨论如何防御来自应用层的DDoS攻击. 第一步:获取大量 ...

  3. 人物-IT-史玉柱：史玉柱

    ylbtech-人物-IT-史玉柱:史玉柱 史玉柱,1962年9月15日生于安徽省蚌埠市怀远县,商人.企业家. 1984年从浙江大学数学系本科毕业,分配至安徽省统计局工作.1989年深圳大学软件科学系 ...

  4. SSDB VS redis

    现在有不少团队开始使用了一个新型高效的 NoSQL数据库 - SSDB,如 京东.唱吧 …… SSDB 官网的定义 一个高性能的支持丰富数据结构的 NoSQL 数据库,用于替代 Redis 官网 ht ...

  5. github的简单操作

    之前初学过一点git版本控制工具,利用github做仓库,照着github上的文档练习的了一下.不过那只篇只是照虎画猫(我的水平只能照着老虎画个猫模样,嘻嘻!). 最近在学hibernate,公司与家 ...

  6. spider（一）

    此爬虫内容无架构: 1.URL管理器:用集合,mysql表,缓存等 2.网页下载器:实现网页下载, urllib2:官方基础模块 requests:三方的(更强):伪装成浏览器访问,代理登录,http ...

  7. 哪个U盘启动工具能安装红帽系统，

    安装红帽子,不要使用windows系统下的PE启动盘,两者引导方式不一样,不通用的.正确的方法是网上下载红帽子的ISO镜像文件后,用UltraISO这个工具写入优盘或者光盘,得到的系统盘才可以启动电脑 ...

  8. oracle开发so easy（一）

    如何让你的程序可以在oracle数据库和sqlserver数据库自由切换? 如何让你从跨数据库开发的不适中解脱出来? 跟我来吧,我们一起开始entity framework的开发之旅.是的,entit ...

  9. POJ 1601 拓展欧几里得算法

    学习链接:http://www.cnblogs.com/frog112111/archive/2012/08/19/2646012.html 先来学习一下什么是欧几里得算法: 欧几里得原理是:两个整数 ...

  10. Spring Security 入门原理及实战

    目录 从一个Spring Security的例子开始 创建不受保护的应用 加入spring security 保护应用 关闭security.basic ,使用form表单页面登录 角色-资源 访问控 ...