Heim > Artikel > Web-Frontend > Javascript klickt auf die Schaltfläche, um die Fähigkeiten „Hidden Display Switching effect_javascript“ zu erlangen

Javascript klickt auf die Schaltfläche, um die Fähigkeiten „Hidden Display Switching effect_javascript“ zu erlangen

WBOYOriginal: 2016-05-16 15:16:181844Durchsuche

Das Beispiel in diesem Artikel teilt den Umschaltcode zum Ausblenden und Anzeigen durch Klicken auf eine Schaltfläche als Referenz. Der spezifische Inhalt ist wie folgt

Rendering:

In vielen Anwendungen gibt es eine solche Funktion, mit der Sie zwischen dem Ein- und Ausblenden eines Elements wechseln können. Der Code lautet wie folgt

<html>
<head>
<meta charset="gb2312">
<title>隐藏和显示</title>
<style type="text/css">
#thediv
{
 width:200px;
 height:100px;
 line-height:100px;
 text-align:center;
 background-color:green;
}
</style>
<script type="text/javascript">
function Show_Hidden(obj)
{
 if(obj.style.display=="block")
 {
  obj.style.display='none';
 }
 else
 {
  obj.style.display='block';
 }
}
window.onload=function()
{
 var olink=document.getElementById("link");
 var odiv=document.getElementById("thediv");
 olink.onclick=function()
 {
  Show_Hidden(odiv);
  return false;
 }
}
</script>
</head>
<body>
<a href="#" id="link">显示\隐藏切换</a>
<div id="thediv" style="display:block">脚本之家欢迎您</div>
</body>
</html>

Der obige Code erfüllt unsere Anforderungen. Durch Klicken auf den oberen Link können Sie zwischen dem Anzeigen und Ausblenden des Div wechseln.

Umsetzungsprinzip:
Registrieren Sie den Onclick-Ereignishandler für den Link. Wenn es sich um einen Block handelt, setzen Sie ihn auf den Status „Versteckt“. , was bedeutet, dass das Div auf „Ausgeblendet“ gesetzt ist. Das Prinzip ist ungefähr das gleiche. Was besondere Aufmerksamkeit erfordert, ist, dass der Zweck der Verwendung von style="display:block" im div darin besteht, der obj.style.display-Anweisung den Erhalt des Attributwerts zu ermöglichen. Andernfalls kann das div nicht beim ersten Klick auf ausgeblendet gesetzt werden . Sie können es entfernen. Führen Sie einen Test mit style="display:block" durch. Die return false-Anweisung soll den Sprungeffekt des Links verhindern.

Informationen zu return false finden Sie in diesem Artikel:

"Learning return false in jQuey"

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

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：Die JavaScript-Datei-API implementiert Datei-Upload-Vorschau_Javascript-FähigkeitenNächster Artikel：Die JavaScript-Datei-API implementiert Datei-Upload-Vorschau_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen