手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery siblings()用法实例详解
jQuery siblings()用法实例详解
摘要:siblings()获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。jQuery的遍历方法siblings()$("给定元素")....

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

jQuery 的遍历方法siblings()

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

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

例子:网页选项栏

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

jQuery siblings()用法实例详解1

下面是html代码。

<body> <ul id="menu"> <li>家居</li> <li>电器</li> <li>二手</li> </ul> <ul id="content"> <li>我是家居的内容</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>

其中

jQuery siblings()用法实例详解2

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

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

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

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

以上内容是针对jQuery siblings()用法实例详解,希望对大家有所帮助!

【jQuery siblings()用法实例详解】相关文章:

js中setTimeout()与clearTimeout()用法实例浅析

JQuery中DOM事件合成用法实例分析

JavaScript中switch语句的用法详解

Javascript中For In语句用法实例

js事件监听器用法实例详解

JavaScript中的bold()方法使用详解

JQuery中节点遍历方法实例

jQuery插件制作之全局函数用法实例

jQuery中 prop() attr()使用详解

jQuery插件制作之参数用法实例分析

精品推荐
分类导航