<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" >
window.onload=function(){
var weibo=document.getElementById('weibo');
var content=document.getElementById('content');
var box=document.getElementById('box');
var weibo1=document.getElementById('weibo1');

weibo.onclick=function(){

content.style.display="block";
weibo.style.backgroundColor="red";

}
weibo1.onclick=function(){

content.style.display="none";
weibo.style.backgroundColor="white";

}
}

</script>

<style>

#box{
width: 400px;height: 400px;
}
#weibo{
text-align: center;
}
#box>#content{
height: 150px;width: 100%;background-color: yellow; text-align: center;line-height: 50px;display: none;
}
</style>

</head>
<body>
<div id="box">
<input type="button" value="显示" id="weibo" />
<input type="button" value="隐藏" id="weibo1" />

<div id="content">
<div class="a"> 文本1</div>
<div class="b"> 文本2</div>
<div class="c"> 文本3</div>
</div>
</div>
</body>
</html>

js第一天 点击按钮显示与隐藏的更多相关文章

  1. js实现输入密码之延迟星号和点击按钮显示或隐藏

    缘由 手机打开segmentfalut时,长时间不登陆了,提示要重新登陆,输入的过程中看到输入密码时,延迟后再变成密文,很好奇,所以捣鼓了一下.本文实现了两种密码展示 代码实现 1 先明后密 js实现 ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...

  9. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

随机推荐

  1. RF环境搭建

    官网:http://robotframework.org/ 序号 安装包名 安装方法 下载地址 备注 1 python exe文件,直接双击安装 https://www.python.org/down ...

  2. Weex-进阶笔记二

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Helvetica; color: #945200 } p.p2 { margin: 0.0p ...

  3. iScroll屏幕滑动函数封装总结

    //iScroll.js屏幕滚动函数 function funScroll(a,b) { var d; function beforload() { d = new iScroll(a, { chec ...

  4. Apache环境服务器配置Let's Encrypt免费SSL证书及自动续期方法

    如今越来越多的网站开始使用SSL证书,实现HTTPS网址形式,如果我们是英文网站更需要用到这样格式的HTTPS网址,因为根据谷歌搜索结果提示到如果用到SSL证书的在同等条件下排名结果是有靠前可能的.我 ...

  5. Linux系统编程初探系列之一：文件编程

    系统函数 int creat(const char* filename,mode_t mode) filename:需要创建的文件名(包含路径,缺省为当前路径) mode:创建模式 常见的创建模式有: ...

  6. 计算机网络课程优秀备考PPT之第二章物理层（二）

    为了记录自己从2016.9~2017.1的<计算机网络>助教生涯,也为了及时梳理和整写笔记! 前期博客是, 计算机网络课程优秀备考PPT之第一章概述(一) 以上是<计算机网络> ...

  7. 统计C语言程序行数

    补充前一篇中统计C语言程序行数的程序 写得比较匆忙,可能有些失误,等弄明白GitHub的用法并完善程序后再补充完整代码链接 没有写成函数,但经过简单修改可以作为一个计算或判断函数使用 判断算法主要为以 ...

  8. IOS开发小技巧，知识点

    1.IOS模拟器第一次打开需要进入“设置”中关掉"Auto-Capitalization"选项. 2.NSInteger转化 NSString类型: [NSString strin ...

  9. 第四节，Linux基础命令

    第四节,Linux基础命令 命令是系统操作员对系统传入的指令,传入指令后回车,系统接收到指令做出相应的行为 1.查看用户位于系统什么位置 [pmd]检查操作用户位于系统的什么位置 命令         ...

  10. 2016年团体程序设计天梯赛-决赛 L1-3. 出租（20）

    下面是新浪微博上曾经很火的一张图: 一时间网上一片求救声,急问这个怎么破.其实这段代码很简单,index数组就是arr数组的下标,index[0]=2 对应 arr[2]=1,index[1]=0 对 ...