<!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. ThinkPHP批量添加数据和getField()示例

    批量添加数据 // 批量添加数据 $User = M('users'); $dataList[] = array('name'=>'thinkphp','email'=>'thinkphp ...

  2. js跨域请求获得数据

    很多时候我们想访问其它站点下的数据怎么办? 由于javascript语言安全限制即同源策略造成的. 在使用ajax请求访问其他服务器的数据,此时客户端会出现跨域问题. 在js中,我们直接用XMLHtt ...

  3. gitlab自动备份

    1.周期性计划任务: $crontab -e 0 0 * * * /opt/gitlab/bin/gitlab-rake gitlab:backup:create $service crond res ...

  4. SLF4J 使用简记

    SLF4J 使用简记 使用 SLF4J有一段时间了,在此作上些许记录,以作提示. 本文使用的实际实现的日志框架是 Log4j,所以使用 log4j.properties 文件 SLF4J 需要引入的j ...

  5. DPDK l2fwd 浅注

    l2fwd是DPDK中的非常经典的例子.二层转发模型. 就是在相邻的网卡接口间互相传递报文. 网口0和网口1之间报文互传. 网口2和网口3之间报文互传. ............ 运行参数 . 在目录 ...

  6. PostgreSQL ----- No relations found.

    本篇文章可能有错,尚未细细研究 运行\d出错: No relations found. \d只显示可见的表,也就是该数据库的schema在search_path中. SHOW search_path; ...

  7. 浏览器差异性hack

    1 js函数 很多人误以为数组 push 方法拼接字符串会比 += 快,要知道这仅仅是 IE6-8 的浏览器下. 实测表明现代浏览器使用 += 会比数组 push 方法快,而在 v8 引擎中,使用 + ...

  8. C# Monads的实现（二）

    再谈continuation monad 上一篇中我们已经介绍了continuation monad,但是这个monad与Identity,Maybe,IEnumerable monads稍微难于理解 ...

  9. sql表命名规范

    tb_new_Count 新闻内容表:首先表加tb_,如果是视图则加V_存储过程加_p. 下划线后面要大写. 切记.(萌萌的国庆要加油)

  10. compute post expression

    #include<iostream> #include<stack> #include<string> using namespace std; //post ex ...