事件：onclick

属性：display，className

用到for语句，index标记，this当前事件

先清空后附加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<div id="div1">
<input class="active" type="button" value="服装"/>
<input type="button" value="家具"/>
<input type="button" value="运动"/>
<input type="button" value="提醒"/>
<div>女装，男装，童装</div>
<div>家具用品</div>
<div>户外运动</div>
<div>注意事项</div>
</div>
<script src="js1.js"> </script>
</body>
</html>

/////////////////css

#div1 .active{
background:yellow;
}
#div1 div{
width:200px;
height:200px;
border:1px red solid;
background:#ccc;
display:none;
}

/////////////////////////js

window.onload=function(){
var oDiv=document.getElementById("div1");
var oBtn=oDiv.getElementsByTagName("input");
var aDiv=oDiv.getElementsByTagName("div");
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className="";
aDiv[i].style.display="none";
};
this.className="active";
aDiv[this.index].style.display="block";
};

}
};

5.1点击4个按钮显示相应的div的更多相关文章

  1. JS实现点击参数面板按钮显示或隐藏数据

    当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...

  2. 帆软报表（finereport）JS实现点击参数面板按钮显示或隐藏数据

    当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...

  3. jquery点击按钮显示和隐藏DIv

    function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { ...

  4. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  5. 安卓TextView限定行数最大值，点击按钮显示所有内容

    问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...

  6. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  7. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  8. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  9. Html + JS ： 点击对应的按钮，进行选择是隐藏还是显示（用户回复功能）

    例如: 当我点击按钮1时,点击第一下进行显示This is comment 01,点击第二下隐藏This is comment 01 当我点击按钮2时,点击第一下进行显示This is comment ...

随机推荐

  1. 深度学习笔记之使用Faster-Rcnn进行目标检测 （原理篇）

    不多说,直接上干货! Object Detection发展介绍 Faster rcnn是用来解决计算机视觉(CV)领域中Object Detection的问题的.经典的解决方案是使用: SS(sele ...

  2. 堆排序C＋＋实现

    //heap sort //堆排序能够分为两个过程.其一是建堆.其二是出堆 //堆是一种全然二叉树,所以它能够用数组进行存储. //堆可分为最大堆和最小堆.最大堆指任一节点的值都大于其左右孩子节点的值 ...

  3. Hackrank Equal DP

    Christy is interning at HackerRank. One day she has to distribute some chocolates to her colleagues. ...

  4. 安卓输入子系统之inotify与epoll机制【学习笔记】【原创】

    平台信息:内核:linux3.1.0系统:android5.0平台:tiny4412 作者:庄泽彬(欢迎转载,请注明作者) 说明: 韦老师的安卓视频学习笔记 一.在安卓的输入子系统中如何监听文件的产生 ...

  5. POJ3177 Redundant Paths —— 边双联通分量 + 缩点

    题目链接:http://poj.org/problem?id=3177 Redundant Paths Time Limit: 1000MS   Memory Limit: 65536K Total ...

  6. javaweb项目数据库中数据乱码

    javaweb项目数据库中数据乱码 first: 排查原因: 打断点,查看到底是在执行存数据库操作之前就已经乱码了,还是存数据库操作后乱码的. 前者解决方案: 在web.xml里面加上: <fi ...

  7. windows系统下mysql5.5查看和设置数据库编码

    1.显示当前编码命令: show variables like 'char%'; 2.设置编码为utf8命令:set names 'utf8';

  8. python的for...in...if...语句

    Python中,for...[if]...语句一种简洁的构建List的方法,从for给定的List中选择出满足if条件的元素组成新的List,其中if是可以省略的.下面举几个简单的例子进行说明. &g ...

  9. leetcode 戳气球

    有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left] * nums[ ...

  10. Ruby  Hash类

    Hash类 更新:2017/06/15 获取没有的哈希值时返回nil 更新:2018/01/03 增加merge! 更新: 2018/04/05 增加搜索 key 更新: 2018/04/30 增加e ...