Maison > interface Web > js tutoriel > Comment jquery contrôle l'affichage et le masquage des éléments li

Comment jquery contrôle l'affichage et le masquage des éléments li

WBOY
Libérer: 2021-11-30 19:23:17
original
4734 Les gens l'ont consulté

Méthodes permettant à jquery de contrôler l'affichage et le masquage des éléments li : 1. Utilisez la méthode show() pour contrôler l'affichage des éléments li, la syntaxe est "$("li").show()" ; la méthode hide() pour contrôler l'élément li Pour masquer des éléments, la syntaxe est "$("li").hide()".

Comment jquery contrôle l'affichage et le masquage des éléments li

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.2.1, ordinateur Dell G3.

Comment jquery contrôle-t-il l'affichage et le masquage de li

Dans jquery, vous pouvez contrôler l'affichage et le masquage de li via la méthode show() et la méthode hide() si elle est sélectionnée. l'élément a été Afficher, puis masquez l'élément. La syntaxe est : Méthode

$(selector).hide(speed,callback)
Copier après la connexion

show(). Si les éléments sélectionnés ont été masqués, ces éléments sont affichés. La syntaxe est :

$(selector).show(speed,callback)
Copier après la connexion

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<ul>
  <li id="test">雪碧</li>
  <li>可乐</li>
  <li>凉茶</li>
</ul>
<button id="anniu">显示与隐藏</button>
<script>
$(function(){
$(&#39;#anniu&#39;).click(function(){//点击按钮
if($(&#39;#test&#39;).is(&#39;:hidden&#39;)){//如果当前隐藏
$(&#39;#test&#39;).show();//点击显示
}else{//否则
$(&#39;#test&#39;).hide();//点击隐藏
}
})
})
</script>
</body>
</html>
Copier après la connexion

Résultat de sortie :

Comment jquery contrôle laffichage et le masquage des éléments li

. Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal