Résumé de l'utilisation de siblings() dans jQuery-js tutoriel-php.cn

Résumé de l'utilisation de siblings() dans jQuery

巴扎黑

Libérer： 2017-06-24 10:19:28

original

2316 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. Ensuite, cet article vous présentera jQuery exemples détaillés d'utilisation de siblings(). Les amis qui en ont besoin peuvent s'y référer.

siblings() obtient les frères et sœurs de chaque élément dans la correspondance. Le filtrage est facultatif.

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

$("给定元素").siblings(".selected")

Copier après la connexion

Sa fonction est de filtrer un élément frère donné (à 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

où