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 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
Vue.js对象转换实例
Jun 07 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
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 什么是PEAR?(第二篇)
2009/03/19 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python文件的md5加密方法
2016/04/06 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
业务经理的岗位职责
2013/11/16 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
优秀老师事迹材料
2014/02/05 职场文书
公司委托书格式
2014/08/01 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫