<!DOCTYPE html>
<html>

<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑", "arial", " sans-serif";
            z-index: 2;
        }

        #ul {
            /*border: 1px red solid;*/
            list-style: none;
            width: 260px;
            height: 30px;
            margin-left: 10px;
        }

        #ul li {
            display: inline-block;
            border: 2px solid #ccc;
            border-bottom: none;
            width: 60px;
            height: 25px;
            text-align: center;
            cursor: pointer;
            background: #fff;
        }

        #ul li.on {
            border-top: 2px solid saddlebrown;
            border-bottom: 2px solid #fff;
        }

        #div div {
            border: 1px solid blue;
            border-top: none;
            width: 276px;
            height: 125px;
            margin-top: -5px;
            padding: 6px;
            border-top: 2px saddlebrown solid
        }

        .hide {
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById("div")
            var oUl = document.getElementById("ul")
            var aLi = oUl.getElementsByTagName("li");
            var aDiv = oDiv.getElementsByTagName("div"); //oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div
            for (var i = 0; i < aLi.length; i++) { //获取所有i编号的元素
                aLi[i].index = i; //定义一个index属性对li进行编号
                aLi[i].onclick = function () { //再注册一个点击事件，当点击的时候所有标签都恢复最初状态
                    for (var n = 0; n < aLi.length; n++) { //这步是相对于未被点击部分的样式
                        aLi[n].className = "";
                        aDiv[n].className = "hide";
                    }
                    this.className = "on"; //再对点击事件添加相应的属性
                    aDiv[this.index].className = ""; //通过之前的index编号绑定的指定div
                }
            }
        }
    </script>
</head>

<body>
<div id="div">
    <ul id="ul">

        <li class="on">房产</li>        <li>家居</li>        <li>二手房</li>    </ul>    <div>        275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br>    </div>    <div class="hide">        40平出租屋大改造 美少女的混搭小窝<br> 经典清新简欧爱家 90平老房焕发新生<br> 新中式的酷色温情 66平撞色活泼家居<br> 瓷砖就像选好老婆 卫生间烟道的设计<br>    </div>    <div class="hide">        通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万<br>    </div></div></body></html>

js操作div的显隐的更多相关文章

  1. js 控件样式显隐和赋值

    控制样式显示: $("#againMetting")[0].style.display = "inline";//显示 $("#againMettin ...

  2. Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现

    最近发现了一个鹅厂的仓库,实现起来比我这个方便[捂脸].https://github.com/AlloyTeam/AlloyLever 一.vue-cli脚手架中搭建的项目引入vConsole调试 1 ...

  3. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  4. 浏览器页面的显隐对js的setInterval（）执行所产生的bug

    前段时间,所写的一个”js无间隙滚动效果“,当页面离开后,重新返回时,会出现动画的错乱.我以为是因为我代码逻辑的原因导致的,但是,当在火狐浏览器上进行浏览时却没有动画错乱的问题. 于是乎,在网上查找是 ...

  5. Python3+Selenium3+webdriver学习笔记12（js操作应用：滚动条 日历 内嵌div）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记12(js操作应用:滚动条 日历 内嵌div)'''from ...

  6. day50 盒子显隐2D形变

    复习 1.浮动布局 解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度 脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重 ...

  7. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

  8. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  9. js 操作select和option

    js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...

随机推荐

  1. （数据科学学习手札22）主成分分析法在Python与R中的基本功能实现

    上一篇中我们详细介绍推导了主成分分析法的原理,并基于Python通过自编函数实现了挑选主成分的过程,而在Python与R中都有比较成熟的主成分分析函数,本篇我们就对这些方法进行介绍: R 在R的基础函 ...

  2. FPGA算法学习(1) -- Cordic（圆周系统之旋转模式）

    三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来计算任意角度的三角函数的值.这种表格在人们刚刚产生三角函数的概念的时候就已经有了,它们通常是通过从已知值(比如sin(π/2)= ...

  3. POJ1426 Find The Multiple 解题报告

    参考:http://www.cnblogs.com/ACShiryu/archive/2011/07/24/2115356.html #include <iostream> #includ ...

  4. python2.7练习小例子（二十九）

        29):1.题目:按相反的顺序输出列表的值. #!/usr/bin/python # -*- coding: UTF-8 -*- a = ['one', 'two', 'three'] for ...

  5. 【Consul】Consul架构-Gossip协议

    Consul使用gossip协议管理成员关系.广播消息到整个集群.详情可参考Serf library,Serf使用到的gossip协议可以参阅"SWIM: Scalable Weakly-c ...

  6. C++11中decltype的使用

    The decltype type specifier yields the type of a specified expression. The decltype type specifier, ...

  7. 听雷哥浅谈Redis

    Linux下安装redis 1.下载源码,解压缩后编译源码. $ wget http://download.redis.io/releases/redis-2.8.3.tar.gz $ tar xzf ...

  8. Word 2013 无法撤销操作的错误

    来自 <http://delxu.blog.51cto.com/975660/1409139> 关闭正在运行的所有程序. 按Win-R,在运行框中键入regedit,然后单击“确定”. 在 ...

  9. Python-类-函数参数-takes 0 positional arguments but 1 was given

    在学习Python基础的时候,在创建某一个shownametest()函数,解析器会报错 TypeError: shownametest() takes 0 positional arguments ...

  10. P5056 插头dp

    题面 Source: unordered_map: #include <iostream> #include <tr1/unordered_map> #include < ...