下面是闭包做选项卡：

<!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. nodejs利用windows API读取文件属性(dll)

    nodejs调用delphi编写的dll中,使用了dll调用windows api转读取文件属性,感觉使用nodejs也可直接调用windows api. 此处需用到windows系统的version ...

  2. 奇异值分解（SVD）详解

    2012-04-10 17:38 45524人阅读 评论(18) 收藏 举报  分类: 数学之美 版权声明:本文为博主原创文章,未经博主允许不得转载. SVD分解 SVD分解是LSA的数学基础,本文是 ...

  3. 5.JasperReports学习笔记5-其它数据生成动态的报表（WEB）

    转自:http://www.blogjava.net/vjame/archive/2013/10/12/404908.html 一.空数据(Empty Datasources) 就是说JRXML文件里 ...

  4. 浏览器重绘（repaint）和回流（reflow）的那点事

    第一次听到重绘和回流是在鹅厂实习面试,那个时候对浏览器没有任何的概念,所以面试官说到这个问题的时候整个人都蒙圈了.下面是近期学习总结: 重绘(repaint)和回流(reflow) 文档初次加载时,H ...

  5. js中一些小知识点总结--持续更新

    以下知识点来自于编写高质量代码-改善JavaScript程序的188个建议,只用于自我知识的补充. 一.NaN 1.NaN是一个特殊的数量值,不表示一个数字,尽管下面的代码仍然是返回类型为number ...

  6. 大内存电脑在vbox安装linux报错

    问题描述: 1.机器:Linux主机,特别是主机为大内存,比如: 4G内存的使用pae内核的Ubuntu系统的thinkpad电脑. 2.情况:使用VirtualBox安装Linux系统时,比如:通过 ...

  7. !important定义为最高级不可替代

    <!DOCTYPE html> /*!important定义为最高级不可替代*/ <html lang="en"> <head> <met ...

  8. 关于android的一些博文收集

    Java网络编程总结 http://www.cnblogs.com/oubo/archive/2012/01/16/2394641.html Android应用系列:双击返回键退出程序 http:// ...

  9. Centos下添加/删除用户

    useradd具体参数 [root@yhwang ~] useradd -h Usage: useradd [options] LOGIN useradd -D useradd -D [options ...

  10. webAPI路由的使用

    根据WEBAPI的路由规则,在实际项目当中有二种用法, 一:webAPI.Config里面为 config.MapHttpAttributeRoutes(); config.Routes.MapHtt ...