jQuerysiblings()怎么使用

这篇文章主要介绍“jQuery siblings()怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jQuery siblings()怎么使用”文章能帮助大家解决问题。

建网站原本是网站策划师、网络程序员、网页设计师等,应用各种网络程序开发技术和网页设计技术配合操作的协同工作。创新互联建站专业提供成都网站制作、网站设计、外贸网站建设,网页设计,网站制作(企业站、成都响应式网站建设公司、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!

siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

jQuery 的遍历方法siblings()

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

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

例子:网页选项栏

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

jQuery siblings()怎么使用

下面是html代码。



家居
  • 电器
  • 二手
  • 我是家居的内容
  • 欢迎您来到电器城
  • 二手市场,产品丰富多彩
  • jQuery代码

    
    $(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值可以巧妙的将两者关联。
    });
    });
    })
    

    其中

    jQuery siblings()怎么使用

    当点击相应的选项卡后,被点击的选项卡内容就会被show()。而其他2个同胞元素

  • 选项卡用silibings()筛选出来hide()掉。

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

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

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

    关于“jQuery siblings()怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


    本文名称:jQuerysiblings()怎么使用
    分享链接:http://scyanting.com/article/pihcec.html