jQuerysiblings()用法实例详解

首页 > 网络编程 > JavaScript > javascript类库 > jquery 更新日期: 2015-05-26
siblings 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。接下来通过本文给大家介绍jQuery siblings用法实例详解,需要的朋友参考下吧

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

jQuery 的遍历方法siblings()

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

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

例子:网页选项栏

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

jQuerysiblings()用法实例详解

下面是html代码。

<body>
<ul >
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul >
<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> 

其中

jQuerysiblings()用法实例详解

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

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


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

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

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • PHP中的switch语句的用法实例详解
    switch 语句用于基于不同条件执行不同动作.本文给大家介绍php中的switch语句的用法实例详解,涉及到switch用法方面的知识点,对switch用法感兴趣的朋友通过本文一起学习吧switch是一个开关语句,那么很多朋友都只知道简单的switch开关语句的用法了,下面一聚教程小编就为各位详细的介绍一下switch用法例子吧. 只所以称为"高 ...
  • JavaScript中window.open用法实例详解
    这篇文章主要介绍了JavaScript中window.open用法,实例分析了window.open方法的功能.参数及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文较为详细的分析了JavaScript中window.open用法.分享给大家供大家参考.具体如下: 代码如下:<script LANGUAGE="javascript&q ...
  • js中this用法实例详解
    这篇文章主要介绍了js中this用法,实例分析了this指向windows.指向对象及改变this指向的相关技巧,需要的朋友可以参考下本文实例讲述了js中this用法.分享给大家供大家参考.具体如下: 1. 指向window 全局变量 alert(this) //返回 [object Window] 全局函数 function sayHello(){ ale ...
  • Python中subprocess模块用法实例详解
    这篇文章主要介绍了Python中subprocess模块用法,实例分析了subprocess模块的相关使用技巧,需要的朋友可以参考下本文实例讲述了Python中subprocess模块用法.分享给大家供大家参考.具体如下: 执行命令: >>> subprocess.call(["ls", "-l"]) ...
  • PHP邮件发送类PHPMailer用法实例详解
    这篇文章主要介绍了PHP邮件发送类PHPMailer用法,详细的讲述了安装及配置的方法与功能实现代码,非常具有实用价值,需要的朋友可以参考下本文实例讲述了PHP邮件发送类PHPMailer用法,并详细讲述了其具体的操作步骤.分享给大家供大家参考.具体步骤如下: 1.在服务器安装 sendmail sudo apt-get install sendmail 2 ...
猜你喜欢