<!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. namenode处于安全模式怎么解决？

    当我们在hdfs上操作文件的时候,有时候会报错 ,出现namenode   in   safemode namenode处于安全模式的原因: 1.NameNode发现集群中DataNode丢失达到一定 ...

  2. java冒泡算法

    public static void maopao() { int temp; int[] values = {2, 34, 0, 245}; for (int i = 0; i < value ...

  3. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  4. SharedPreferences Android

    类似iOS的NSUserDefaults,采用key-value(键值对)形式,主要用于轻量级的数据存储 public class MainActivity extends AppCompatActi ...

  5. (原)一段看似美丽的for循环，背后又隐藏着什么

    之前很长一段时间,潜心修炼汇编,专门装了一个dos7,慢慢玩到win32汇编,再到linux的AT&A汇编,尝试写mbr的时候期间好几次把centos弄的开不了机,又莫名其妙的修好了,如今最大 ...

  6. 第七篇Python基本数据类型之数字&字符串&布尔值

    数字 写在最前,必须要会的:int() 整型 Python3里无论数字多长都用int表示,Python2里有int和Long表示,Long表示长整型 有关数字的常用方法,方法调用后面都必须带括号() ...

  7. Hadoop伪分布式集群

    一.HDFS伪分布式环境搭建 Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有很多共同点.但同时, ...

  8. 21天学习caffe（一）

    ubuntu环境安装caffe1 安装依赖 apt-get install libatlas-base-dev apt-get install python-dev apt-get install l ...

  9. 文件名的查找——find

    查找文件!!! 命令格式:find [PATH] [option] [action] 一.参数1——与时间有关的参数 -atime.-ctime.-mtime -mtime n:在n天之前的“一天之内 ...

  10. IDEA使用maven构建时控制台中文乱码的解决办法

    使用maven clean install 项目时控制台中文乱码,解决办法如下: Setting->maven->runner VMoptions: -Dfile.encoding=UTF ...