Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

Detailed explanation of jQuery siblings() usage examples_jquery

WBOY
Release： 2016-05-16 15:03:50
Original
1762 people have browsed it

siblings() Get the siblings of each element in the matching set. Filtering by selector is optional.

jQuery’s traversal method siblings()

$("给定元素").siblings(".selected")
Copy after login

Its function is to filter the given sibling elements (excluding the given element itself)

Example: Web page options bar

When you click on any tab, the other two tabs will change their styles and their contents will be hidden.

The following is the html code. 

<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>
Copy after login

jQuery code

<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>
Copy after login

Which

When the corresponding tab is clicked, the content of the clicked tab will be show(). The other two sibling elements

  • tabs are filtered out using silibings() and hide() removed.

    In this way, the content of the clicked area can be dynamically displayed, while the other two tabs can be hidden.

    and

    $("给定元素").siblings(".selected")
    Copy after login
    The (".selected") in

    means to filter the sibling elements of the given element class named .selected (excluding the given element itself)

    The above content is a detailed explanation of jQuery siblings() usage examples. I hope it will be helpful to everyone!

    • Related labels：
    jquery_siblings用法 jquery_siblings
    source：php.cn
    Previous article：JQuery implementation code to add/delete nodes to select Next article：JQuery plug-in Marquee.js achieves seamless scrolling effect_jquery
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    Creating this specific design using a grid: a step-by-step guide I'm trying to create a layout similar to this image, I've tried using this grid but can't ...
    From 2024-04-06 20:29:08
    0
    2
    492
    Select woocommerce related products using custom taxonomy with 3 level hierarchy I have a woocommerce store with a custom classification of "Sports". The classif...
    From 2024-04-06 20:05:30
    0
    1
    544
    How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
    From 2024-04-06 20:02:10
    0
    2
    543
    Calculate the sum of fields in another table using MySQL SQL query I have a schema like this: User table with attributes "user_id" and "userna...
    From 2024-04-06 19:39:29
    0
    1
    441
    CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
    From 2024-04-06 19:25:49
    0
    1
    505
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template