<!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. ZedGraph类库之基本教程篇

      第一部分:基本教程篇                 ZedGraphDemo中一共有9个基本教程的例子.其中大部分都类似,我会讲解其中一些比较典型的例子.把ZedGraph类库的使用逐步展现给大 ...

  2. 命令提示符（cmd）中的tracert命令详解(小技巧)

    tracert也被称为Windows路由跟踪实用程序,在命令提示符(cmd)中使用tracert命令可以用于确定IP数据包访问目标时所选择的路径.本文主要探讨了tracert命令的各个功能. 百度经验 ...

  3. leetcode378

    public class Solution { public int KthSmallest(int[,] matrix, int k) { ); ); var list = new List< ...

  4. 视频x264编码浅析

    声明 x264_param_t 结构体变量: x264_param_t params; x264_param_default_preset(&params, "ultrafast&q ...

  5. c#winform图片绘制与图片验证码

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. POJ1161（并查集）

    1.题目链接地址 http://poj.org/problem?id=1161 2.源代码 #include <iostream> using namespace std; ]; ]; i ...

  7. System.Security.Cryptography.CryptographicException: 出现了内部错误。

    引用:http://www.cnblogs.com/ithome8/p/5189926.html 我总结了一下出现证书无法加载的原因有以下三个 1.证书密码不正确,微信证书密码就是商户号 解决办法:请 ...

  8. Screen - BOM对象

    Screen 对象 Screen 对象包含有关客户端显示屏幕的信息. 注释:没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象. Screen 对象属性 属性 描述 availHei ...

  9. 哪些 IT 职位难以替代，竞争力强？

    原文出自知乎:http://www.zhihu.com/question/24795311 有10多年的软件行业经验,只针对软件行业来回答这个问题: 很少有无法替代的职位,只能说替代的成本高低而已. ...

  10. Gym101350 FMonkeying Around

    题意 有n只猴子排成一排,一共有m个笑话.开始时,这些猴子都坐在椅子上.下面m行给出的每个笑话包含三个整数x,l,k.代表猴子x讲了笑话l,所以距离x小于等于k的猴子如果他们从没听过这个笑话,他们会掉 ...