Maison > Article > interface Web > Javascript clique sur le bouton pour obtenir les compétences effect_javascript de commutation d'affichage cachée

Javascript clique sur le bouton pour obtenir les compétences effect_javascript de commutation d'affichage cachée

WBOYoriginal: 2016-05-16 15:16:181844parcourir

L'exemple de cet article partage le code de commutation à masquer et à afficher en cliquant sur un bouton pour votre référence. Le contenu spécifique est le suivant

Rendu :

Dans de nombreuses applications, il existe une telle fonction. Cliquer sur le même bouton peut basculer entre l'affichage et le masquage d'un élément. Voici un exemple de code pour présenter comment obtenir cet effet :

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

Le code ci-dessus répond à nos exigences. En cliquant sur le lien supérieur, vous pouvez basculer entre l'affichage et le masquage du div. Voici une introduction à son processus d'implémentation.
Principe de mise en œuvre :
Enregistrez le gestionnaire d'événements onclick pour le lien. Ce gestionnaire peut déterminer la valeur de l'attribut style.display du div. S'il est bloqué, définissez-le sur aucun, ce qui signifie que le div est défini sur l'état caché. Sinon, définissez-le sur bloquer. , ce qui signifie que le div est défini sur caché. Pour afficher l'état, le principe est à peu près le même. Ce qui nécessite une attention particulière est que dans le div, le but de l'utilisation de style="display:block" est de permettre à l'instruction obj.style.display d'obtenir la valeur de l'attribut. Sinon, le div ne peut pas être masqué au premier clic. . Vous pouvez le supprimer. Faites un test avec style="display:block". L'instruction return false sert à empêcher l'effet de saut du lien.

Pour plus d'informations sur le retour faux, veuillez vous référer à cet article : "Apprendre le retour faux dans jQuey"

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：L'API de fichier JavaScript implémente les compétences de téléchargement de fichiers preview_javascriptArticle suivant：L'API de fichier JavaScript implémente les compétences de téléchargement de fichiers preview_javascript

Articles Liés

Voir plus