Contrôler l'affichage et le masquage des éléments via jQuery-js tutoriel-php.cn

Contrôler l'affichage et le masquage des éléments via jQuery

WBOY

Libérer： 2024-02-25 20:51:07

original

1253 Les gens l'ont consulté

Contrôler laffichage et le masquage des éléments via jQuery

Titre : Commutation visible et invisible des éléments via jQuery

Dans le développement Web, nous rencontrons souvent le besoin de contrôler l'état visible et invisible des éléments en cliquant sur des boutons ou d'autres événements. Cette fonction peut être facilement réalisée à l'aide de jQuery. Ensuite, nous utiliserons des exemples de code spécifiques pour illustrer comment utiliser jQuery pour basculer entre les éléments visibles et invisibles.

Tout d'abord, ajoutez un bouton et un élément qui doivent contrôler la visibilité dans le fichier HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery可见与不可见切换</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="toggleButton">切换元素可见性</button>
    <div id="toggleElement" style="display: none;">
        这是需要切换可见性的元素
    </div>

    <script src="script.js"></script>
</body>
</html>

Copier après la connexion

Ensuite, créez un nouveau fichier JavaScript nommé script.js dans le répertoire du projet et écrivez le code suivant : script.js的JavaScript文件，编写以下代码：

$(document).ready(function() {
    $('#toggleButton').click(function() {
        $('#toggleElement').toggle();
    });
});

Copier après la connexion

在这段代码中，我们首先使用$(document).ready()来确保DOM加载完成后执行代码。然后通过$('#toggleButton').click()来监听按钮的点击事件。在点击按钮时，调用$('#toggleElement').toggle()方法来切换#toggleElement元素的可见与不可见状态。

最后，在浏览器中打开HTML文件，点击按钮即可看到#toggleElementrrreee

Dans ce code, nous utilisons d'abord $(document).ready() pour nous assurer que le code est exécuté après le chargement du DOM. Écoutez ensuite l'événement de clic sur le bouton via $('#toggleButton').click(). Lorsque vous cliquez sur le bouton, la méthode $('#toggleElement').toggle() est appelée pour changer les états visible et invisible de l'élément #toggleElement.

Enfin, ouvrez le fichier HTML dans le navigateur et cliquez sur le bouton pour voir l'élément #toggleElement basculer entre visible et invisible. 🎜🎜A travers cet exemple simple, nous pouvons voir que jQuery peut être utilisé pour basculer facilement entre les éléments visibles et invisibles, apportant plus d'interactivité et de dynamique au développement web. La syntaxe concise et puissante de jQuery nous permet d'implémenter rapidement diverses fonctions et d'offrir aux utilisateurs une meilleure expérience de navigation. 🎜

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!