JavaScript实现自动消除按钮功能的方法
更新时间：2015年08月05日 12:36:33 作者：皮蛋
这篇文章主要介绍了JavaScript实现自动消除按钮功能的方法,涉及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程序设计有所帮助。
相关文章
其实最初使用alert还是一个常态，包括现在很多B端平台还在直接使用alert，本文主要介绍了javascript使用alert实现一个精美的弹窗，感兴趣的可以了解一下2023-02-02
深入剖析JavaScript中Geolocation API的使用
这篇文章主要来和大家一起深入探讨 JavaScript 的 Geolocation API,看看它的强大之处以及如何在你的项目中应用它,感兴趣的可以了解下2024-03-03
JavaScript实现sleep睡眠函数的几种简单方法总结
sleep是一种函数,他的作用是使程序暂停指定的时间,起到延时的效果,下面这篇文章主要给大家介绍了关于JavaScript实现sleep睡眠函数的几种简单方法总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了js+css实现换肤效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
JS获取及设置TextArea或input文本框选择文本位置的方法
这篇文章主要介绍了JS获取及设置TextArea或input文本框选择文本位置的方法,涉及TextArea及input文本操作技巧,需要的朋友可以参考下2015-03-03
本文与大家分享个js实现倒计时的代码，主要实现功能距离结束还有多少时间，感兴趣的朋友可以参考下，希望对大家学习js有所帮助2013-07-07
使用 Node.js 做 Function Test实现方法
这篇文章介绍了Node.js 做 Function Test实现方法，有需要的朋友可以参考一下2013-10-10
这篇文章主要介绍了JavaScript框架特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
下面小编就为大家分享一篇form表单数据封装成json格式并提交给服务器的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了bootstrap table表格使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
最新评论