jquery中siblings方法配合什么方法一起使用
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。接下来通过本文给大家介绍jQuery siblings()用法实例详解,需要的朋友参考下吧
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
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方法配合什么方法一起使用的更多相关文章
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- js进阶 12-13 jquery中one方法和trigger方法如何使用
js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...
- jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强)
jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...
- js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- jquery中prop()方法和attr()方法的区别浅析
官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢 jquery1.6中新加了一个方法pr ...
- jquery中prop()方法和attr()方法的区别
最近在用jquery的时候遇到一个问题,那就是attr()方法,发现这个方法有时候使用会有一些说不出原因的问题.翻翻自己之前笔记发现,还有个函数prop(). 这两个函数都可以用来获取属性. jque ...
随机推荐
- Container 、Injection
Container: Linux容器作为一类操作系统层面的虚拟化技术成果,旨在立足于单一Linux主机交付多套隔离性Linux环境.与虚拟机不同,容器系统并不需要运行特定的访客操作系统.相反,容器共享 ...
- bootstrap的日期选择器
时间框偏移解决办法 首先导入js和css文件 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ...
- C#各种小问题汇总不断更新
IIS Express Worker Process已停止工作-->管理员身份运行CMD 输入netsh winsock reset 回车OK 未能从程序集“System.ServiceMode ...
- 到底什么是哈希Hash?
知识点总结 ---------------------------------------------------------------------------------------------- ...
- win7激活成功 但每次开机后又显示此windows副本不是正版的解决办法
进入命令行界面,输入 SLMGR -REARM 命令,点击回车 此方法只是暂时激活系统,大概4个月左右,即要使用此方法再次进行激活
- 安装zabbix3.4 centos7
服务端 192.168.70.133 客户端 192.168.70.134 sed -i "s/SELINUX=enforcing/SELINUX=disabled/g" /etc ...
- 2017-11-03 Fr OCT 球体积的导数为球表面积
上学期学立体几何时注意到这一点.去问林老师,没听明白(写完笔记后发现林老师讲得是对的,惭愧).今天下午考历史的时候突然想起来. 除了球体积的导数为球表面积外,还注意到圆体积的导数为圆周长.今天中午看w ...
- java DES加解密及Wrong key size错误
如下的DES加密方法会报错:Wrong key size public static String encryptDES(String source) throws Exception{ Secret ...
- vs2015单步调试问题(附加进程)
如果页面有Codebehind的页属,那么前端通过ajax提交到后端代码,无法在后端代码中取到值. 这是一个vs属性标记,用于跟踪管理项目.如果后端代码的自定义指定(Inherits)的话,应该取掉 ...
- k8s之配置flanneld网络
Flannel是Overlay网络的一种,也是将源数据包封装在另一种网络包里面进行路由转发和通信,目前已经支持UDP.VXLAN.AWS VPC和GCE路由等数据转发方式. Flannel通过给每台宿 ...