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. 问题.NET访问 IIS 元数据库失败。

    问题现象:访问 IIS 元数据库失败. 说明:执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.We ...

  2. win8 64位系统，安装JDK的步骤及其环境配置

    工具/原料 jdk-8u51-windows-x64.exe 下载地址:::http://www.cr173.com/soft/55503.html#address jdk 安装步骤 1:到oracl ...

  3. Install Package and Software

    svn http://tortoisesvn.sourceforge.net/ git https://download.tortoisegit.org/ http://git-for-windows ...

  4. Win7与虚拟机VMware下运行的Ubuntu共享文件夹

    安装VMware Tools,在VMware面板上选择“虚拟机-重新安装VMware tools…”,如下图所示: 在这里VMware虚拟了一个光盘镜像,我们需要把这个镜像挂载到本机的/mnt目录下面 ...

  5. 彻底解决iOS项目中 &quot;_OBJC_CLASS_$_XXXService&quot;, referenced from: 的相似问题

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmllcGVuZzEwOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. Antelope与 Barracude MYSQL 文件格式

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

  7. phpcms 源码分析四： 数据库类实现

    这次是逆雪寒的数据库类分析: <?php /* 这个讲 phpcms 的数据库类 和 phpcms 的文本缓存的实现.看了看 都是很简单的东西.大家看着我注释慢慢看吧.慢慢理解,最好能装了PHP ...

  8. ant有什么用

    内容摘要: ANT是一个基于Java的自动化脚本引擎,脚本格式为XML.除了做Java编译相关任务外,ANT还可以通过插件实现很多应用的调用. 1)ANT的基本概念: 2)ANT的安装:解包,设置路径 ...

  9. JS火狐与IE的差别

    function isIE(){ //ie? ) return true; else return false; } if(!isIE()){ //firefox innerText define H ...

  10. Linux环境下搭建Android开发环境

    最近在折腾linux.因为咱是搞安卓开发的,所以少不了需要搭建Android开发环境,就此小记,希望能给向我一样的开发者一点帮助!开干! 1.安装JDK 下载JDK包,得到的是类似于jdk-8u65- ...