事件：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. wampserver64安装时出现计算机缺少MCVR110.DLL无法安装等

    在安装wamp完成后运行出现上述问题,是因为wamp版本与DLL不对称.下面给出 wamp64位下载地址 http://www.onlinedown.net/soft/118187.htm vcred ...

  2. maven工具使用

    一.工具安装: 所需工具 : JDK 1.8Maven 3.3.3 1.安装JDK 和 JAVA_HOME 2.添加 M2_HOME 和 MAVEN_HOME 3.添加到环境变量 - PATH 4.验 ...

  3. js 弹出对话框的方法总结

    原文:http://www.cnblogs.com/xiaofengfeng/archive/2012/10/20/2732784.html <!DOCTYPE html PUBLIC &quo ...

  4. 【转】Vuex 学习总结

    对于很多新手来说,只是阅读文档是不好消化,我的建议是看看 vuex 的实例,通过研究实例来学习vuex.这样就会好理解多了.如果还是不能理解,最好办法就是先把store 的四个属性:state, ge ...

  5. vss操作说明

    vss命令行   一.环境变量配置 “我的电脑”->“属性”->“高级”->“系统环境变量” 1) 添加追加环境变量 名称为:Path:值为:VSS应用程序所在目录 例如:D:\Pr ...

  6. 解决weblogic页面和控制台乱码问题

    转自:https://blog.csdn.net/u010995831/article/details/53283746 之前一直有碰到weblogic各种乱码问题,要不就是页面乱码,要不就是控制台乱 ...

  7. Mysql操作符号

    1.比较运算符:  =  相等  <> 不等于 != 这个也可以  >  大于  <  小于  >= 大于等于  <= 小于等于 2.逻辑运算符:  is null ...

  8. java翻译lua+c+openssl签名项目

    原来项目中用openresty nginx+lua实现server,lua调用c动态链接库,来使用openss做签名,并生成130字节(128签名+2位自定义字节)长度的文件. nginx: loca ...

  9. python 面向对象一 OOP

    一.面向对象和面相过程 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面 ...

  10. bzoj 1499: [NOI2005]瑰丽华尔兹【dp+单调队列】

    设f[a][i][j]为第a段时间结束时在(i,j)位置的最长滑行距离,转移很好想,就是分四个方向讨论,然后枚举这段时间的滑行长度取个max即可 但是这样是O(n^4)的,考虑优化 发现同一行或列,取 ...