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的同胞元素（不包括给定元素自己）

jQuery siblings()用法与实例。的更多相关文章

  1. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  2. JQuery datepicker 用法

    JQuery datepicker 用法   jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...

  3. jquery cookie用法

    jquery cookie用法(获取cookie值,删除cookie) cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使 ...

  4. jQuery $.each用法[转]

    jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...

  5. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  6. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  7. jquery cookie 用法

    jquery cookie 用法 $.cookie("name","value","options")  当不设置options时,此coo ...

  8. jquery.cookie用法详细解析，封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  9. jquery.post用法补充(type设置问题)

    jquery.post用法 http://blog.csdn.net/itmyhome1990/article/details/12578275 当使用ajax获取data数据的时候,直接data.f ...

随机推荐

  1. Go语言简介

    Go语言简介 - Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go语言简介 Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go ...

  2. mongodb的高级操作（聚合框架）

    group by 查询 不要用java驱动带的group by ,要用2.2版本后的aggregate聚合框架来搞,经过试验速度快一倍 参考 官网:http://docs.mongodb.org/ma ...

  3. .NET程序集（Assembly）

    在.NET 中,新引入了一个程序集的概念,就是指经由编译器编译得到的,供CLR进一步编译执行的那个中间产物,在WINDOWS系统中,它一般表现为.dll,或者是.exe的格式,但是要注意,它们跟普通意 ...

  4. vc++ CreateFile报错，返回123

    //hFile = CreateFile("D:\dev\fmt\res\face1.png", 0, FILE_SHARE_READ, NULL, OPEN_EXISTING, ...

  5. Java实现文件的RSA和DES加密算法

    根据密钥类型不同将现代密码技术分为两类:对称加密算法(秘密钥匙加密)和非对称加密算法(公开密钥加密) 对称钥匙加密系统是加密和解密均采用同一把秘密钥匙,而且通信双方都必须获得这把钥匙,并保持钥匙的秘密 ...

  6. mysql 服务器ip连接统计

    有的时候数据库服务器连接数过大,也没有慢sql,想知道哪些应用服务器连接上来的比较多,下面的命令轻松搞定 netstat -tnp|grep ESTABLISHED|awk '{ print $5 } ...

  7. Antelope与 Barracude MYSQL 文件格式

    作者:吴炳锡 来源:http://www.mysqlsupport.cn/ 联系方式: wubingxi#163.com 转载请注明作/译者和出处,并且不能用于商业用途,违者必究. Antelope是 ...

  8. 场景类(CCSence)

    场景与流程控制 在图2-1中,每一个节点中显示的内容相对不变.通常,我们把这些内容相对不变的游戏元素集合称作场景(scene),把游戏在场景之间切换的过程叫做流程控制(flow control). 在 ...

  9. create database xx 或者show database 没有任何反应

    命令是以:结束的,你忘记了,记住,是英文状态下的:

  10. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...