Comment basculer entre afficher et masquer les divs en CSS

CSS est l'une des compétences que le développement front-end doit maîtriser, et afficher et masquer le changement de div en est une partie importante. Cet article présentera en détail comment basculer entre l'affichage et le masquage des divs en CSS.

1. Utilisez l'attribut display pour afficher et masquer les divs

En CSS, le moyen le plus couramment utilisé pour basculer entre l'affichage et le masquage des divs est d'utiliser l'attribut display. L'affichage peut contrôler la visibilité et l'expressibilité des éléments. L'effet div caché dont nous avons besoin est obtenu grâce à cet attribut.

Les valeurs d'affichage couramment utilisées sont : block, inline, inline-block, none, etc., parmi lesquelles none est la clé pour cacher le div.

Le code CSS est le suivant :

.hide {
    display: none;
}
.show {
    display: block;
}

Le masquage est obtenu en définissant l'attribut d'affichage de l'élément .hide sur none, et l'attribut d'affichage de l'élément .show est block pour obtenir l'affichage.

Pour contrôler l'affichage et le masquage des divs, nous pouvons utiliser JavaScript ou jQuery pour accéder à ces classes CSS et les ajouter ou les supprimer si nécessaire.

Par exemple :

Code HTML :

<button id="hidden_btn">点击隐藏</button>
<div id="hidden_div" class="hide">隐藏文本</div>

Code JS :

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Ici, nous utilisons la méthode toggleClass() de jQuery pour changer de classe Lorsque vous cliquez sur le bouton, cette méthode supprimera la classe .hide de l'éditeur. et ajoutez la classe .show pour faire passer le div de caché à affiché.

2. Utilisez l'attribut de visibilité pour afficher et masquer les divs

L'attribut de visibilité, comme l'attribut d'affichage, peut être utilisé pour contrôler la visibilité des éléments. Ses valeurs communes sont : visible, caché, réduit.

Lorsque nous utilisons l'attribut de visibilité pour masquer un élément, l'élément prend toujours de la place dans le document HTML et devient simplement visuellement transparent ou invisible, mais sa taille et sa position existent toujours sur la page.

Le code CSS est le suivant :

.hide {
    visibility: hidden;
}
.show {
    visibility: visible;
}

L'exemple de code CSS est similaire à l'exemple d'affichage utilisant l'attribut display ici nous ne parlons que du code JS :

Code JS :

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

La méthode toggleClass() est. également utilisé pour changer de classe.

3. Utilisez l'attribut opacity pour afficher et masquer le div

L'attribut opacity est utilisé pour définir la transparence de l'élément. Sa plage de valeurs est de 0,0 à 1,0, où 0,0 signifie que l'élément est complètement transparent et 1,0. signifie que l'élément est complètement opaque.

Le code CSS est le suivant :

.hide {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.show {
    opacity: 1;
    height: auto;
}

En plus d'utiliser l'attribut opacity, nous définissons également les attributs height et overflow pour résoudre le problème de laisser de l'espace lors du masquage du div.

Lorsque la classe hide est appliquée, la hauteur du div sera définie sur 0 et le contenu sera masqué. Afin d'ajuster automatiquement la hauteur après la commutation, nous définissons la hauteur sur auto dans la classe .show, afin que le div s'ajuste automatiquement et devienne visible lors de la commutation.

Regardons à nouveau le code JavaScript :

Code JS :

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Utilisez également la méthode toggleClass().

4. Résumé

Ce qui précède sont les trois méthodes principales pour afficher et masquer les divs en CSS. Elles utilisent l'attribut d'affichage, l'attribut de visibilité et l'attribut d'opacité. Dans les applications pratiques, nous devons choisir la méthode à utiliser en fonction de besoins spécifiques.

De plus, la valeur qui combine visibilité et affichage est souvent utilisée - visibilité:hidden;display:none Cette valeur vise à rendre l'élément invisible et à ne pas occuper d'espace à l'écran. que le code JS peut obtenir les informations de position de l'élément lorsqu'il est appelé. Cependant, lorsque visible:hidden;display:none est utilisé, l'élément ne répondra plus aux événements de clic, ce qui peut affecter votre application. Par conséquent, vous devez choisir en fonction de la situation spécifique lors de son utilisation.

En bref, vous devez maîtriser et bien utiliser les propriétés CSS afin d'améliorer les pages Web développées en termes d'effets visuels, d'améliorer l'expérience utilisateur et de jeter des bases solides pour le développement JS ultérieur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!