<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选项卡</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        button{ width: 40px; height: 30px; line-height: 30px; text-align:center;  }

        button.active{ background-color: yellow }

        .content{ width: 200px; height: 200px; border:2px solid red; display: none; }

    </style>

</head>

<body>

    <div class="wrapper">

        <button class="active">11</button>

        <button>2</button>

        <button>3</button>

        <div class="content" style="display:block">1111111111</div>

        <div class="content">222222222</div>

        <div class="content">3333</div>

    </div>

    <script type="text/javascript">

        var btn = document.getElementsByTagName('button');

        var content = document.getElementsByClassName('content');

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

            //形成一个闭包

            (function(n){

                btn[n].onclick=function(){

                //清除同级元素的当前类

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

                    btn[j].className = "";

                    content[j].style.display = "none";

                }

                //点击添加当前类

                this.className = "active";

                content[n].style.display = "block";

            }

            }(i))

        }

    </script>

</body>

</html>

效果图：

javascript选项卡2的更多相关文章

  1. JavaScript选项卡/页签/Tab的实现

    选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...

  2. JavaScript选项卡

    实现js选项卡 html的代码如下: <div class="tabdiv"> <ul class="tabs" id="oTab& ...

  3. Javascript 选项卡

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 原生javascript选项卡

    js选项卡是一个常用的实现.这里我们将用原生js来将其给予实现. 首先html代码: <div id="container"> <input type=" ...

  5. javascript选项卡切换样式

    HTML代码 <ul class="touzi_xuan1" id="qixian"> <li>****: </li> &l ...

  6. 用JS制作简易选项卡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  7. 实用的Jquery选项卡TAB

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

  8. 选项卡tab2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. easyui---tabs(选项卡)

    配置好easyui环境 1.笔记: tabs(选项卡) class:class="easyui-tabs" //<div class="easyui-tabs&qu ...

随机推荐

  1. Py修行路 python基础 （十七）property 静态方法 类方法

    一.property 属性 特性 (装饰器是可调用对象,被装饰对象也是可调用对象)   1.在类内函数属性上添加一个@property,就会对函数属性进行伪装. import math class C ...

  2. Python Twisted系列教程14：Deferred用于同步环境

    作者:dave@http://krondo.com/when-a-deferred-isnt/  译者:杨晓伟(采用意译) 你可以从这里从头开始阅读这个系列. 介绍 这部分我们要介绍Deferred的 ...

  3. 用python40行代码编写的计算器

    效果图 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  4. Android UI学习 - ListView (android.R.layout.simple_list_item_1是个什么东西)

    Android UI学习 - ListView -- :: 标签:Android UI 移动开发 ListView ListActivity 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始 ...

  5. 【原创】基于UDP广播的局域网Web Window Service日志跟踪小工具

           一直感觉Web开发或者windows服务的日志跟踪调试不是很方便          特别是在生产环境服务器上面          目前一般的解决方案是通过各种日志工具把错误信息和调试信息 ...

  6. mysql中的 函数

  7. spring quartz 配置多个定时任务

    1.配置文件-quartz-1.7.3jar   spring版本为3.1.3jar <?xml version="1.0" encoding="UTF-8&quo ...

  8. Codeforces 919F——A Game With Numbers

    转自大佬博客:https://www.cnblogs.com/NaVi-Awson/p/8405966.html; 题意 两个人 Van♂ 游戏,每人手上各有 8'>88 张牌,牌上数字均为 [ ...

  9. Linux awk&sed

    awk AWK是强大的文本处理工具,擅长对日志文件迚行快速分析. 它丌仅用亍 Linux ,也是任何环境中现有的功能最强大的数据处理引擎之一. 名称得自亍它的发明者 Alfred Aho .Pet ...

  10. oralce错误总结

    1>System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本. 给oracle客户端的bin目录添加““Authenticated Users”权 ...