<!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. nios pio interrupt 的使能

    关于nios 中的中断,因为要16c550中需要nios的中断环境去测试,所以就用到了中断. 硬件:在nios中添加硬件PIO,但是要使能中断功能.如下图所示: 系统列化,PIO的连接就不说了.但是要 ...

  2. Proxmark3笔记(一)

    Kali下使用Proxmark3 apt-get update apt-get install build-essential libreadline5 libreadline-dev libusb- ...

  3. C# IP地址去掉端口号

    string Ip1 = "192.168.0.199:7777"; string Ip2 = Ip1.Remove(Ip1.IndexOf(':'));

  4. Sql Server 2005如何导入DBF文件？

    提问者采纳   select * into 要生成的SQL表名 from OPENROWSET('MICROSOFT.JET.OLEDB.4.0','dBase IV;HDR=NO;IMEX=2;DA ...

  5. 上传图片用图片文件的对象hash哈希值判断图片是否一样，避免重复提交相同的图片到服务器中

    上传图片用图片文件的对象hash哈希值判断图片是否一样,避免重复提交相同的图片到服务器中 前端:要用到一个插件,点击下载 <!DOCTYPE html> <html xmlns=&q ...

  6. Python基础学习七 Excel操作

    python操作excel,python操作excel使用xlrd.xlwt和xlutils模块, xlrd模块是读取excel的,xlwt模块是写excel的,xlutils是用来修改excel的. ...

  7. 22-从零玩转JavaWeb-代码块

    配套详解视频 局部代码块与初始化代码块 面向对象-静态代码块 代码块总结 组合关系与类的加载 静态代码块及字段初始化练习 一.什么是代码块 在类中或方法当中 使用{}括起来的一段代码 就称它是一个代码 ...

  8. JS中日期处理

  9. Logos

    [Logos] Logos is a component of the Theos development suite that allows method hooking code to be wr ...

  10. 刷题向》DP》关于基础DP(easy)

    openjudge  8464 这道题其实很简单,算是DP的基础题,比较适合开拓DP思维. 题目比较有欺骗性,其实稍微想想就可以解决,因为题意说第一次卖出后才能买入,所以我们可以考虑枚举断点,所以题目 ...