<!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. 将List中的数据更新到数据库中

    List中有相应的数据,更新到数据库如下: 1.根据关键字查找后删除: foreach (var item in objSelList) { ADDaAn da = db.ADDaAns.Find(i ...

  2. 3124: [Sdoi2013]直径

    3124: [Sdoi2013]直径 https://www.lydsy.com/JudgeOnline/problem.php?id=3124 分析: 所有直径都经过的边,一定都是连续的一段.(画个 ...

  3. UVA 1175 - Ladies' Choice

    1175 - Ladies' Choice 链接 稳定婚姻问题. 代码: #include<bits/stdc++.h> using namespace std; typedef long ...

  4. golang 小知识点记录

    获取url中的参数及输出到页面的几种方式 func SayHello(w http.ResponseWriter, req *http.Request) { req.Method //获取url的方法 ...

  5. python 快速搭建文件服务器

    以http方式共享当前文件夹的文件 可实现跨平台文件传输 只需要一句话搞定 #python -m SimpleHTTPServer 8001 浏览器中输入 http://ip:8001  显示所有文件 ...

  6. AV Foundation 实现文字转语音

    AV Foundation 主要框架 CoreAudio 音频处理框架 扩展学习:<Learning CoreAudio> CoreVideo 视频处理的管道模式,逐帧访问 CoreMed ...

  7. Struts2(四.注册时检查用户名是否存在及Action获取数据的三种方式)

    一.功能 1.用户注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  8. m个苹果放在n个盘子中有多少种结果

    题目 m个苹果放在n个盘子中有多少种结果,前置条件: 允许存在空盘 重复的摆放结果忽略不计 根据题意,也就是有3种情况,的确完全重复的摆放方式是没多大意义的 思路 这题可以用枚举的描述方式进行尾递归求 ...

  9. 1034 Head of a Gang （30 分）（图的遍历or并查集）

    dfs #include<bits/stdc++.h> using namespace std; ; int mp[N][N]; int weight[N]; int vis[N]; ma ...

  10. Python 3 学习笔记之——标准库概述

    1. 操作系统接口 os 模块提供了一些与操作系统相关联的函数. >>> os.getcwd() # 获取当前工作目录 '/home/senius' >>> os. ...