JavaScript实现自动消除按钮功能的方法


Posted in Javascript onAugust 05, 2015

本文实例讲述了JavaScript实现自动消除按钮功能的方法。分享给大家供大家参考。具体如下:

这里使用JavaScript自动消除前项显示的内容,在网页特定方位显示内容,第一个按钮可用,但第二个在第一个点击之后就不能用了,如果想让第二个按钮起作用,你需要对其进行功能消除,如本示例代码就实现这样一种功能。

运行效果如下图所示:

JavaScript实现自动消除按钮功能的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>JavaScript自动消除前项显示的内容</title>
<style type="text/css">
body{padding:20px;background:#333;}
h1{color:white;}
em{width:100px;height:100px;background:#EEE;border:1px #CCC solid;padding:10px;cursor:pointer;}
div{width:100px;height:100px;background:#444;margin:10px;display:none;color:white;text-align:center;line-height:100px;}
</style>
</head>
<body> 
  <h1>鱼与熊掌不可兼得</h1>
  <br />
 <em>我要鱼</em>
 <em>我要熊掌</em>
 <div id="a">鱼</div>
 <div id="b">熊掌</div>
<script type="text/javascript">
window.onload=function(){
  var abtn=document.getElementsByTagName("em")[0];
  var bbtn=document.getElementsByTagName("em")[1];
  var a=document.getElementById("a");
  var b=document.getElementById("b");
  abtn.onclick=function(){
    a.style.display="block";
    bbtn.onclick=null;
  }
  bbtn.onclick=function(){
    b.style.display="block";
    abtn.onclick=null;
  }
}   
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
深入理解JavaScript定时机制
Oct 29 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
JS版元素周期表实现方法
Aug 05 #Javascript
javascript实现手机震动API代码
Aug 05 #Javascript
JS实现生成会变大变小的圆环实例
Aug 05 #Javascript
JavaScript计算某一天是星期几的方法
Aug 05 #Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 #Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 #Javascript
JS+CSS实现表格高亮的方法
Aug 05 #Javascript
You might like
php分页函数
2006/07/08 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
在Python中编写数据库模块的教程
2015/04/29 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python实时监控logstash日志代码
2020/04/27 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
金融专业个人求职信
2013/09/22 职场文书
财务会计毕业生自荐信
2013/11/02 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
商务英语广告词大全
2014/03/18 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
质量负责人岗位职责
2015/02/15 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书