下面是闭包做选项卡：

<!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. poj 2105 IP Address(水题)

    一.Description Suppose you are reading byte streams from any device, representing IP addresses. Your ...

  2. 多校联合训练&hdu5791 Two

    hdu5791 dp[i][j]表示的是序列A前i个数字和序列B前j个数字的公共子序列的总个数,那么的dp公式就可以这么表示 理解一下此公式若最尾部的a[i]和b[j]相等的话,那么单独的a[i]和b ...

  3. pyodbc

  4. C#设计模式(11)——外观模式

    一.概念 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直 ...

  5. 同名项目复制,发布新项目,提示已存在该项目于webapp

    来自为知笔记(Wiz)

  6. service的生命周期以及两种service的差异

    可以看到,两种service的生命周期都相对简单,有一点不同的是,Intentservice每次调用的时候都执行onstartcommand,而boundservice一旦启动了之后,就不会每次执行o ...

  7. Intent的简单概述

    Intent是负责在系统组件之间传递信息的一个对象,就像名字一样,是一个意图,可以将当前组件的意图传递给系统,例如启动Activity等,还可以在传递的时候附加上一些值,可以用Bundle对象封装这些 ...

  8. DOM 中 Property 和 Attribute 的区别（转）

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  9. 如何设置 Windows 默认命令行窗口大小和缓冲区大小

    关键字: 命令行不能全屏 命令行最大化只有一半屏幕 命令行 字体 背景 颜色 解决方案:http://unmi.cc/save-windows-command-size/ 简要说明: win+r,输入 ...

  10. 想以编程为职业，现在正在看毕向东的java基础，接下来应该看什么视频，求前辈们指教。

    想以编程为职业,现在正在看毕向东的java基础,接下来应该看什么视频,求前辈们指教. https://zhidao.baidu.com/question/1368482680246425699.htm ...