<!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. maven项目引入外部jar包的三种方式

    方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud</groupId> <!--自定义--& ...

  2. MAPREDUCE的实战案例

    reduce端join算法实现 1.需求: 订单数据表t_order: id date pid amount 1001 20150710 P0001 2 1002 20150710 P0001 3 1 ...

  3. Cable master（二分-求可行解）

    Inhabitants of the Wonderland have decided to hold a regional programming contest. The Judging Commi ...

  4. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 8_Neural Networks Representation 神经网络的表述

    神经网络是一种受大脑工作原理启发的模式. 它在许多应用中广泛使用:当您的手机解释并理解您的语音命令时,很可能是神经网络正在帮助理解您的语音; 当您兑现支票时,自动读取数字的机器也使用神经网络. 8.1 ...

  5. 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 1 线性回归

    作业说明 Exercise 1,Week 2,使用Octave实现线性回归模型.数据集  ex1data1.txt ,ex1data2.txt 单变量线性回归必须实现,实现代价函数计算Computin ...

  6. Spring总结八：jdbcTemplate的简单使用

    简介: Srping毕竟是一站式框架,所以也有操作数据库的东西,那就是jdbcTemplate,介绍一下jdbcTemplate的简单使用. 除了要引入必要的包以外,还需要引入 spring-jdbc ...

  7. Log4Net 在ASP.NET WebForm 和 MVC的全局配置

    使用log4net可以很方便地为应用添加日志功能.应用Log4net,开发者可以很精确地控制日志信息的输出,减少了多余信息,提高了日志记录性能.同时,通过外部配置文件,用户可以不用重新编译程序就能改变 ...

  8. hibernate 一对一（级联关系）

    hibernate 核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hiber ...

  9. Docker学习笔记_安装和使用mysql

    一.系统环境和准备 1.宿主机OS:Win10 64位 2.虚拟机OS:Ubuntu18.04 3.操作账号:docker 二.安装 1.搜索mysql镜像:docker search mysql 2 ...

  10. 在Ubuntu16.04上使用rz上传文件，XXX was skipped

    原本想把hadoop-2.8.5.tar.gz上传到/usr/local/src文件夹下,报错,was skipped 如下图: 换个文件夹位置,更换到本用户文件夹下,可以上传,说明是对文件夹操作权限 ...