jQuery 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的同胞元素(不包括给定元素自己)
转载于:https://www.cnblogs.com/lijinwen/p/5432522.html
jQuery siblings()用法与实例。相关推荐
- jQuery .tmpl() 用法
参考效果: DEMO 下载: jquery-tmpl-master 动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回 ...
- C# Timer用法及实例详解
1.C# Timer用法及实例详解 http://developer.51cto.com/art/200909/149829.htm http://www.cnblogs.com/OpenCoder/ ...
- jquery-1 jquery几个小实例
jquery-1 jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...
- boost::make_nvp用法的实例
boost::core模块boost::make_nvp用法的实例 实现功能 C++实现代码 实现功能 boost::core模块boost::make_nvp用法的实例 C++实现代码 #inclu ...
- boost::iterator的用法测试实例
boost::core模块boost::iterator的用法测试实例 实现功能 C++实现代码 实现功能 boost::core模块boost::iterator的用法测试实例 C++实现代码 #i ...
- boost::core::is_same用法测试实例
boost::core模块boost::core::is_same用法测试实例 实现功能 C++实现代码 实现功能 boost::core模块boost::core::is_same用法测试实例 C+ ...
- OpenCV反向项目功能用法的实例(附完整代码)
OpenCV反向项目功能用法的实例 OpenCV反向项目功能用法的实例 OpenCV反向项目功能用法的实例 #include "opencv2/imgproc.hpp" #incl ...
- OpenCV calcOpticalFlowPyrLK用法的实例(附完整代码)
OpenCV calcOpticalFlowPyrLK用法的实例 OpenCV calcOpticalFlowPyrLK用法的实例 OpenCV calcOpticalFlowPyrLK用法的实例 # ...
- OpenCV cv::split用法的实例(附完整代码)
OpenCV cv::split用法的实例 OpenCV cv::split用法的实例 OpenCV cv::split用法的实例 #include <iostream> #include ...
- OpenCV cv::reduce用法的实例(附完整代码)
OpenCV cv::reduce用法的实例 OpenCV cv::reduce用法的实例 OpenCV cv::reduce用法的实例 #include <iostream> #incl ...
最新文章
- markdown 图片居中_Markdown更改字体、颜色、大小,插入表格等方法
- windows 10 常用快捷键
- hdu4415 不错的想法题
- java数据类型之间的转化
- Linux运行可执行文件
- 美团技术:交易平台建设实践(视频+胶片)
- apisix实际应用_OpenResty 社区王院生:APISIX 的高性能实践
- CSS overflow属性与display属性
- coursera和udacity_三大MOOC平台Coursera、EdX和Udacity的可用性比较研究
- checking for libzip... configure: error: system libzip must be upgraded to version = 0.11问题解决
- 【Java基础】Lambda表达式的使用
- php完全开发手册下载,thinkphp5完全开发手册
- “探月计划”来袭,美国米德天文望远镜助孩子观月赏月
- Unhandled JS Exception: Unexpected identifier ‘_classCallCheck‘. import call expects exactly one arg
- ubuntu16.04开机自动挂载nas盘
- 请给我一篇关于父母育儿方面书籍推荐的文案
- UNIX时间戳与日期的相互转换
- 【单片机开发】智能小车工程(寻迹)
- 基于逐维反向学习的动态适应布谷鸟算法
- SpringBoot+Mybatis+swagger2 简单的增删改查
热门文章
- linux怎么把dos改成unix_如何将文本文件在 Unix和DOS格式之间转换
- Microsoft Help Viewer无法打开的问题
- 利用snapper实现archlinux的系统还原
- 电脑锁屏挂机锁绿色版简单实用工具
- Redis和消息队列
- 微信小程序api视频课程-基础-wx.canIUse的使用
- Java随笔记录第五章:类设计基础
- mysql里面的打钩框是什么东西_jquery 如何对checkbox打勾,取消打勾,打勾判断呢?...
- android开发split的方法在String中的特殊使用
- MBTI职业性格在软件研发组织中不同岗位的分布研究