suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Methode zum automatischen Entfernen von Schaltflächenfunktion_Javascript-Kenntnissen

JavaScript-Methode zum automatischen Entfernen von Schaltflächenfunktion_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:47:051203Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie JavaScript verwenden, um die Schaltflächenfunktion automatisch zu entfernen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier wird JavaScript verwendet, um den im vorherigen Element angezeigten Inhalt automatisch zu entfernen und den Inhalt an einer bestimmten Position der Webseite anzuzeigen. Die erste Schaltfläche ist verfügbar, die zweite kann jedoch nach dem ersten Klick nicht verwendet werden Wenn Sie möchten, dass die zweite Schaltfläche die Funktion aktiviert, müssen Sie ihre Funktion deaktivieren. Dieser Beispielcode implementiert beispielsweise eine solche Funktion.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt: 

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Methode zum Zeichnen von Kreisen und Rechtecken_Javascript-KenntnisseNächster Artikel：js-Methode zum Zeichnen von Kreisen und Rechtecken_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen