下面是闭包做选项卡：

<!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. iOS使用NSURLSession发送POST请求，后台无法接受到请求过来的参数

    iOS中发送POST请求,有时需要设置Content-Type,尤其是上传图片的时候. application/x-www-form-urlencoded: 窗体数据被编码为名称/值对.这是标准的编码 ...

  2. JS性能之setTimeout与clearTimeout

    测试环境: chrome浏览器 结论: 1 一个页面用setTimeout越多,该页面消耗的内存就会越多,几乎成正比. 2 在'startCount(1000000);-->100万'情况下,不 ...

  3. Impala的JDBC无法连接

    这是因为客户端连接的JDBC是Impala的master机器,而不是DataNode:因为JDBC的服务宿主是Impalad,而Impalad只是部署在DataNode

  4. Wireshark抓取本地Tcp包（任何数据包）

    没有任何一个程序员在做项目的时候不会遇到网络编程的问题,要解决这些问题除了对各种网络协议深入了解之外,还需要掌握各种网络分析工具的用法,不用多说wireshark绝对是这方面的翘楚,可惜的是,wire ...

  5. 事务之五：Spring @Transactional工作原理

    本文将深入研究Spring的事务管理.主要介绍@Transactional在底层是如何工作的. JPA(Java Persistence API--java持久层)和事务管理 很重要的一点是JPA本身 ...

  6. 8.ireport 取消自动分页，detail不分页

    转自:http://www.blogjava.net/vjame/archive/2013/10/12/404908.html 报表文件属性页面 lgnore pagination 勾选上,就可以取消 ...

  7. J2EE 学习路线

    分享一个比较好的学习网站    http://edu.51cto.com/roadmap/view/id-86.html ================================J2EE=== ...

  8. python使用GUI（图形用户界面）

    打开后: File→New File(Ctrl + N)

  9. C#中读写自定义的web 配置文件

    开发程序的过程中,有时候我们需要自己编写一个config文件,比如取名App.config, 然后写一些配置信息在里面.然后我们需要编写C#代码来对这个配置文件进行读写 比如:App.Config & ...

  10. 1. csrf 简介

    浅谈CSRF CSRF是什么? (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 年曾被列为互联网 大安全隐患之一,也被称为“One Click A ...