<!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. python2.7入门---文件I/O&简单用户交互

        这篇文章开始之前,我们先来看下python中的输出方法.最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你传递的表达式转换成一个字符串表达式,并将结果写 ...

  2. P1991 无线通讯网

    P1991 无线通讯网 题目描述 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络: 每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话. 任意两个配备了一条卫 ...

  3. Django admin操作

      无名小妖     昵称:无名小妖园龄:1年6个月粉丝:22关注:1 +加关注 搜索     常用链接 我的随笔 我的评论 我的参与 最新评论 我的标签 我的标签 Python(1) python3 ...

  4. MySQL源码中的String

    适用于离开作用域就销毁的字符串.

  5. js字符编码笔记

    一.  什么是unicode? ascii码能表示的字符非常有限(128个字符),这对英文来说足够了,但是对法文.中文.土耳奇文等文字则远远不够,于是就产生了新的编码规则-unicode,unicod ...

  6. [转]struct2 拦截所有没有登录的用户，强行转到登录界面AuthorizationInterceptor

    package com.sise.action;   import java.util.Map;   import com.opensymphony.xwork2.Action; import com ...

  7. C++学习009预处理器指令符号 # ## #@ 符号的使用

    # ## #@ 符号是预处理器指令符号. 当预处理器遇到#指令符号时,会将#之后的部分用双引号括起来 当预处理去遇到##指令符号时,直接将##前后部分连接起来 当预处理器遇到#@指令符号,将#@之后的 ...

  8. 2015年开源前端框架盘点TOP20

    2015年,榜单根据github上star数作为排名依据.(榜单中大部分为组件式框架, react.Angular等基础框架不在此篇讨论) 1.Bootstrap 类别/语言:HTML.CSS.Jav ...

  9. Struts2(三.用户登录状态显示及Struts2标签)

    1.编写main.jsp /WebContent/main.jsp 之前用户登录时已把用户存入session <%@ page language="java" content ...

  10. （转）Unreal Networking Guide Created by Zach Metcalf

        2. 3.