<!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. WebService第一天——概述与入门操作

    一.概述 1.是什么 Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些 ...

  2. No parser was explicitly specified, so I'm using the best available HTML parser for this system ("html.parser").警告解决方法

    在使用BeautifulSoup库时出现该警告,虽然不影响正常运行,但强迫症不能忍啊!! 详细警告信息如下: UserWarning: No parser was explicitly specifi ...

  3. JAVA中堆栈和内存分配详解(摘抄)

    在Java中,有六个不同的地方可以存储数据: 1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存 ...

  4. 深度学习之卷积神经网络CNN

    转自:https://blog.csdn.net/cxmscb/article/details/71023576 一.CNN的引入 在人工的全连接神经网络中,每相邻两层之间的每个神经元之间都是有边相连 ...

  5. Hibernate-ORM:06.Hibernate中三种状态

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客主要叙述Hibernate中的三种状态:临时状态(瞬时状态),持久状态,游离状态 commit和flu ...

  6. Virtual Host on Apache（Apache上建立虚拟主机）

    0. Introduction Usually, we want to build two or more websites on a web server, but we have only one ...

  7. 掘金 Android 文章精选合集

    掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...

  8. 有没有不适合使用flex/lex作为词法分析器的语言?（摘自知乎）

    本问题及解答摘自本人知乎 http://www.zhihu.com/people/chaos-xie   http://www.zhihu.com/question/29922657 感谢知乎网友的回 ...

  9. bzoj1367 可并堆

    题面 参考:<左偏树的特点及运用--黄河源> 我们将这个数列划为很多个互不相交的区间,每一段区间内的 \(b\) 是相等的,即 \(b[l[i]]=b[l[i]+1]=...=b[r[i] ...

  10. 《Deep Learning》第二章 线性代数 笔记

    第二章 线性代数 2.1 名词 标量(scalar).向量(vector).矩阵(matrix).张量(tensor) 2.2 矩阵和向量相乘 1. 正常矩阵乘法: 2. 向量点积: 3. Hadam ...