jquery un show hide

jQuery est une bibliothèque JavaScript très populaire qui offre de nombreuses façons de simplifier la programmation JavaScript. L'une des fonctionnalités les plus couramment utilisées est l'affichage et le masquage d'un fichier. La balise a est généralement un lien hypertexte utilisé pour créer un lien vers une autre page, mais dans certains cas, vous souhaiterez peut-être basculer le lien a entre le masquer et l'afficher.

Cet article vous présentera comment utiliser jQuery pour afficher et masquer un lien. Tout d’abord, nous expliquerons pourquoi vous devez faire cela, puis expliquerons comment utiliser jQuery pour y parvenir.

Pourquoi devez-vous afficher et masquer un lien ?

Dans la conception de pages, vous souhaiterez peut-être parfois que les utilisateurs puissent cliquer sur un lien lorsqu'ils en ont besoin, et le masquer ou le désactiver lorsqu'ils ne le font pas. Masquer un lien est très utile pour réduire l’encombrement d’une page et est souvent utilisé sur les appareils mobiles.

Par exemple, sur les appareils mobiles, lorsque l'utilisateur clique sur un bouton, vous souhaiterez peut-être masquer certains liens dans la page actuelle afin que l'espace ne soit pas encombré. Dans ce cas, vous pouvez utiliser jQuery pour basculer la visibilité du lien.

Comment afficher et masquer un lien dans jQuery ?

Tout d'abord, définissez un lien en HTML. Cela ressemble à ceci :

<a href="https://example.com">Click me</a>

Ensuite, dans le fichier JavaScript, incluez la bibliothèque jQuery et le code suivant :

$(document).ready(function(){
    $("a").hide();    // 初始时隐藏a链接
    $("button").click(function(){
        $("a").toggle(); // 当单击按钮时显示/隐藏a链接
    });
});

Cet exemple masquera tous les liens lors du chargement de la page. Il ajoutera ensuite un événement de clic à l'élément bouton et lorsque l'utilisateur clique sur le bouton, il basculera la visibilité de tous les liens. Si un lien est actuellement masqué, il sera affiché, s'il est actuellement affiché, il sera masqué.

Cependant, ce code s'appliquera à tous les liens a sur la page entière. Si vous souhaitez uniquement opérer sur certains liens a, vous devez les marquer également, lorsque les liens a sont masqués, si l'utilisateur clique dessus, il peut le faire ; en fait, les liens sont toujours ouverts.

Voici un code amélioré pour cibler un lien avec une classe CSS spécifique et désactiver tous les liens lorsque vous les masquez :

<a href="https://example.com" class="my-link">Click me</a>

$(document).ready(function(){
    $(".my-link").hide().click(function(e){
        e.preventDefault(); // 取消a链接的默认行为
    });
    $("button").click(function(){
        $(".my-link").toggle().prop("disabled", false);  // 显示/隐藏，启用/禁用a链接
    });
});

Ce code définit un lien avec la classe CSS "mon-lien" et les masque pendant le chargement de la page. Lorsqu'un utilisateur clique sur l'un des liens, cela empêche le comportement par défaut (c'est-à-dire accéder à l'URL du lien). Enfin, lorsque l'utilisateur clique sur le bouton, il affichera ou masquera tous les liens avec cette classe et les activera ou les désactivera.

Résumé

Utiliser jQuery pour afficher et masquer un lien est un moyen pratique, puissant et très utile d'améliorer la clarté et la beauté de votre page.

Nous pouvons opérer sur un lien spécifique en changeant de classe et d'attributs. Nous pouvons également ajouter d'autres attributs, tels que "data-href", pour enregistrer les URL liées afin qu'elles puissent être restaurées à leur état d'origine si nécessaire.

Peu importe la raison pour laquelle vous devez contrôler l'affichage et le masquage des liens, jQuery peut facilement implémenter la fonction. Il s'agit d'une bibliothèque JavaScript populaire qui fournit des méthodes puissantes et efficaces pour simplifier la programmation JavaScript, notamment dans le domaine du développement Web.

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!