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. linux tar 打包 压缩 解压

    dir:  tong 打包/压缩:tar zvf tong.rar tong        tar -czf tong.tar.gz tong 解压缩:tar xvf tong.rar 查看压缩包里的 ...

  2. JavaScript----this陷阱的最全收集

    原文翻译: JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScr ...

  3. Oracle- 用户管理

    Oracle一个数据库里可以分配多个用户,用户创建自己的表,自己创建的表如果不想分配给其他用户使用,其他用户是看不到自己的创建的表的. 用户管理: 创建用户: create user chunxiao ...

  4. csdn 刷分小工具(刷了1000多被封了,慎用)

    先上图,周第一, 月第六代码未整理,比较乱,仅仅供参考(cookie已经废了,号被封了,哈哈) using System; using System.Collections.Generic; usin ...

  5. ActionBarSherlock

    https://github.com/JakeWharton/ActionBarSherlock https://github.com/ddewaele/GoogleMapsV2WithActionB ...

  6. MyPhone

    based on H323plus project. https://github.com/muggot/myphone3/tree/master/myphone3

  7. git 设置

    系统乱码 项目中的编码统一设置为UTF-8编码. 设置系统的语言设置为 zh_UTF-8,把 export LANG=zh_CN.UTF-8 保存到~/.profile文件里. $ env|grep ...

  8. DiscreteSeekBar使用简介，一个带气泡的SeekBar

    android自带的SeekBar样式比较古板,如果我们想让自己的SeekBar炫起来,那么可以考虑使用DiscreteSeekBar.DiscreteSeekBar是GitHub上的一个开源控件,地 ...

  9. TCL 双引号和花括号的区别

    用了很一段时间的Modelsim,用TCL脚本仿真,开始注意起来它,看了些资料,有一个问题始终让我很困惑,那就是花括号 的用法,今天Google了一下,觉得有一点豁然了,记录一下.为了不让自己的翻译影 ...

  10. I2C Verilog的实现（二）

    1. 起始结束信号的判断 //--------------------------------------------- //start,stop condition judgement //---- ...