下面是闭包做选项卡：

<!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. [转]Google开源Leak Finder—用于检测内存泄漏的JavaScript工具-----可惜，暂时打不开google的网站，下载不了

    近日,Google开源了Leak Finder,这款工具可以查看JavaScript应用的堆,进而发现内存泄漏. 作为一门垃圾收集语言,JavaScript并不会出现常见的内存泄露情况,特别是像C++ ...

  2. C++STL库中vector容器常用应用

    #include<iostream> #include<vector> #include<algorithm> using namespace std; int m ...

  3. linux下 vi 命令大全

    引用:http://www.cnblogs.com/88999660/articles/1581524.html 进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi ...

  4. 四 Synchronized

    首先,一个问题:一个boolean成员变量,一个方法赋值,一个方法读值,多线程环境下,需要同步吗? 如果用同步的话,读也要用synchroized修饰,因为可见性的问题 需要同步,或者用volatil ...

  5. Redis的安装和配置文件

    实验环境:Centos6.8 Redis版本:3.0.6 下载Redis,并放到/usr/local/soft下: yum -y install gcc automake autoconf libto ...

  6. VIsual Studio 2010 常用快捷键

    1.Ctrl+S   保存 2.Ctrl+F: 查找 3.Ctrl+H: 替换 4.Ctrl+E,S: 查看空白 5.Ctrl+K+C: 注释选定内容 6.Ctrl+K+U: 取消选定注释内容 7.C ...

  7. Qt乱码解决办法（常量中有换行符）

    用记事本打开源代码,然后点另存为,utf-8,编码覆盖 QStringLiteral("打开相机")

  8. shell判断网络主机存活

    判断网络主机存活企业面试题4:写一个脚本,实现判断10.0.0.0/24网络里,当前在线用户的IP有哪些(方法有很多) #!/bin/sh#[ -f /etc/init.d/functions ] & ...

  9. 项目积累demo-01

    1 搭建Spring-Boot项目 在这里我使用intellij新建spring boot工程: 点击next; 输入Group以及artifact之后.点击next.之后点击web.接着finish ...

  10. 生物数据库介绍——NCBI

    NCBI(National Center for Biotechnology Information,美国国家生物技术信息中心)除了维护GenBank核酸序列数据库外,还提供数据分析和检索资源.NCB ...