Kaedah JavaScript untuk menghapuskan kemahiran function_javascript butang secara automatik-tutorial js-php.cn

Kaedah JavaScript untuk menghapuskan kemahiran function_javascript butang secara automatik

WBOY

Lepaskan： 2016-05-16 15:47:05

asal

1229 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara menggunakan JavaScript untuk menghapuskan fungsi butang secara automatik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini, JavaScript digunakan untuk menghapuskan kandungan yang dipaparkan secara automatik dalam item sebelumnya dan memaparkan kandungan dalam kedudukan tertentu halaman web. Butang pertama tersedia, tetapi yang kedua tidak boleh digunakan selepas klik pertama anda mahu butang kedua untuk mengaktifkan fungsi, anda perlu menghapuskan fungsinya Sebagai contoh, kod sampel ini melaksanakan fungsi sedemikian.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.