JavaScript實現(xiàn)自動消除按鈕功能的方法
更新時間：2015年08月05日 12:36:33 作者：皮蛋
這篇文章主要介紹了JavaScript實現(xiàn)自動消除按鈕功能的方法,涉及javascript針對頁面元素屬性操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)自動消除按鈕功能的方法。分享給大家供大家參考。具體如下：
這里使用JavaScript自動消除前項顯示的內容，在網頁特定方位顯示內容，第一個按鈕可用，但第二個在第一個點擊之后就不能用了，如果想讓第二個按鈕起作用，你需要對其進行功能消除，如本示例代碼就實現(xiàn)這樣一種功能。
運行效果如下圖所示：
具體代碼如下：
<!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使用alert實現(xiàn)一個精美的彈窗
其實最初使用alert還是一個常態(tài)，包括現(xiàn)在很多B端平臺還在直接使用alert，本文主要介紹了javascript使用alert實現(xiàn)一個精美的彈窗，感興趣的可以了解一下2023-02-02
深入剖析JavaScript中Geolocation?API的使用
這篇文章主要來和大家一起深入探討?JavaScript?的?Geolocation?API,看看它的強大之處以及如何在你的項目中應用它,感興趣的可以了解下2024-03-03
JavaScript實現(xiàn)sleep睡眠函數的幾種簡單方法總結
sleep是一種函數,他的作用是使程序暫停指定的時間,起到延時的效果,下面這篇文章主要給大家介紹了關于JavaScript實現(xiàn)sleep睡眠函數的幾種簡單方法總結,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了js+css實現(xiàn)換膚效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS獲取及設置TextArea或input文本框選擇文本位置的方法
這篇文章主要介紹了JS獲取及設置TextArea或input文本框選擇文本位置的方法,涉及TextArea及input文本操作技巧,需要的朋友可以參考下2015-03-03
本文與大家分享個js實現(xiàn)倒計時的代碼，主要實現(xiàn)功能距離結束還有多少時間，感興趣的朋友可以參考下，希望對大家學習js有所幫助2013-07-07
使用 Node.js 做 Function Test實現(xiàn)方法
這篇文章介紹了Node.js 做 Function Test實現(xiàn)方法，有需要的朋友可以參考一下2013-10-10
這篇文章主要介紹了JavaScript框架特性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
form表單數據封裝成json格式并提交給服務器的實現(xiàn)方法
下面小編就為大家分享一篇form表單數據封裝成json格式并提交給服務器的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了bootstrap table表格使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04