<!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. WP8.1通过StreamSocket连接C++服务器

    注:当服务端和手机模拟器运行在一台机器时,会有奇怪错误.将服务端放在其它机器上更改客户端连接地址,运行正常.或者直接用本机modern调试也可以. 实例化一个对象 StreamSocket clien ...

  2. html5测试总结

    1.因为html5不兼容IE78,所以在PC上使用并非十分光.pc上IE还是占主流 2.html5主要用在移动终端 3.html5短期内因为自身的缺陷,用户体验无法达到原生app的体验.如:html5 ...

  3. Apache rewrite 出现 400 Bad Request 的解决方法

    <VirtualHost *:80 *:81>         ServerAdmin deng5765@163.com         DocumentRoot /active/www/ ...

  4. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  5. 异常：java.lang.IllegalStateException: Ambiguous handler methods mapped for HTTP path '/app/userInfoMaint/getProvince.do'

    调试代码时出现异常:java.lang.IllegalStateException: Ambiguous handler methods mapped for HTTP path '/app/user ...

  6. Python基础学习三 list-增删改查、切片、循环、排序

    一.list 增删改查 1.增加 方式一: stus = ['xiaohei','xiaobai','xiaohuang','cxdser'] stus.append('test001')#从最后面开 ...

  7. POJ3624（背包问题）

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

  8. sql server2008 跨服务器之间复制表数据

    首先2个数据库要能互相访问,在本地数据库用 select * into 新表 from opendatasource('SQLOLEDB','Data Source=远程数据库IP;User ID=用 ...

  9. 在zookeeper集群的基础上,搭建solrCloud

    1 将在window中部署的单机版solr上传到node-01中 cd /export/software/ rz 选择资料中的solr.zip进行上传(此zip就是  solr的简单部署:在tomca ...

  10. 10. Regular Expression Matching字符串.*匹配

    ［抄题］: Given an input string (s) and a pattern (p), implement regular expression matching with suppor ...