首页 期权学习期权知识正文

jQuery siblings() 方法

xiaojiucai 期权知识 2020-08-17 196 0

定义和用法

siblings() 方法返回被选元素的所有同级元素。

jQuery 的遍历方法siblings()

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

其作用是筛选给定的同胞同类元素(不包括给定元素本身)

例子:网页选项栏

当点击任意一个选项卡是,其他2个选项卡就会改变样式,其内容也会隐藏。

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>

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>

其中

当点击相应的选项卡后,被点击的选项卡内容就会被show()。而其他2个同胞元素<li>选项卡用silibings()筛选出来hide()掉。

这样就能动态的显示点击区域的内容,而隐藏掉另外2个选项卡了。

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

中的(".selected")表示筛选给定元素类名为.selected的同胞元素(不包括给定元素自己)

原文链接:https://www.qiquanji.com/post/8485.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论