communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Explication détaillée de l'utilisation de jQuery siblings() examples_jquery

Explication détaillée de l'utilisation de jQuery siblings() examples_jquery

WBOY
Libérer： 2016-05-16 15:03:50
original
1802 Les gens l'ont consulté

siblings() Obtenez les frères et sœurs de chaque élément de l'ensemble correspondant. Le filtrage par sélecteur est facultatif.

La méthode de traversée de jQuery siblings()

$("给定元素").siblings(".selected")
Copier après la connexion

Sa fonction est de filtrer les éléments frères donnés (à l'exclusion de l'élément donné lui-même)

Exemple : barre d'options de page Web

Lorsque vous cliquez sur un onglet, les deux autres onglets changeront de style et leur contenu sera masqué.

Ce qui suit est le code html. 

<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">我是家居的内容</li>
<li>欢迎您来到电器城</li>
<li>二手市场，产品丰富多彩</li>
</ul>
</body>
Copier après la connexion

code jQuery

<script type="text/javascript">
$(function() {
$("#menu li").each(function(index) { //带参数遍历各个选项卡
$(this).click(function() { //注册每个选卡的单击事件
$("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式
$(this).addClass("tabFocus"); //增加当前选中项的样式
//显示选项卡对应的内容并隐藏未被选中的内容
$("#content li:eq(" + index + ")").show()
.siblings().hide();//#menu与#content在html层没有嵌套关联，但因为其ul序列相同，用index值可以巧妙的将两者关联。
});
});
})
</script>
Copier après la connexion

Lequel

Lorsque l'on clique sur l'onglet correspondant, le contenu de l'onglet cliqué sera show(). Les deux autres onglets

  • des éléments frères sont filtrés à l'aide de silibings() et hide() supprimés.

    De cette manière, le contenu de la zone cliquée peut être affiché dynamiquement, tandis que les deux autres onglets peuvent être masqués.

    et

    $("给定元素").siblings(".selected")
    Copier après la connexion
    Le (".selected") dans

    signifie filtrer les éléments frères de la classe d'éléments donnée nommée .selected (à l'exclusion de l'élément donné lui-même)

    Le contenu ci-dessus est une explication détaillée des exemples d'utilisation de jQuery siblings(). J'espère qu'il sera utile à tout le monde !

    • Étiquettes associées：
    jquery_siblings用法 jquery_siblings
    source：php.cn
    Article précédent：Code d'implémentation JQuery pour ajouter/supprimer des nœuds à sélectionner Article suivant：Le plug-in JQuery Marquee.js réalise un effet de défilement transparent_jquery
    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
    Derniers articles par auteur
    Derniers numéros
    Utiliser des grilles pour créer cette conception spécifique : un guide étape par étape J'essaie de créer une mise en page similaire à cette image, j'ai essayé d'utiliser cette g...
    Depuis 2024-04-06 20:29:08
    0
    2
    492
    Sélectionnez les produits liés au woocommerce à l'aide d'une taxonomie personnalisée avec une hiérarchie à 3 niveaux J'ai une boutique woocommerce avec une classification personnalisée « Sports ». La classif...
    Depuis 2024-04-06 20:05:30
    0
    1
    544
    Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
    Depuis 2024-04-06 20:02:10
    0
    2
    543
    Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
    Depuis 2024-04-06 19:39:29
    0
    1
    441
    Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
    Depuis 2024-04-06 19:25:49
    0
    1
    505
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal