点击显示指定元素隐藏其他同辈元素的方法


Posted in Javascript onFebruary 19, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title></title> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<!-- 引入jQuery --> 
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<script type="text/javascript" > 
//<![CDATA[ 
$(function(){ 
var $div_li =$("div.tab_menu ul li"); 
$div_li.click(function(){ 
$(this).addClass("selected") //当前<li>元素高亮 
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮 
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。 
$("div.tab_box > div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div 
.eq(index).show() //显示 <li>元素对应的<div>元素 
.siblings().hide(); //隐藏其它几个同辈的<div>元素 
}).hover(function(){ 
$(this).addClass("hover"); 
},function(){ 
$(this).removeClass("hover"); 
}) 
}) 
//]]> 
</script> 
</head> 
<body> <div class="tab"> 
<div class="tab_menu"> 
<ul> 
<li class="selected">时事</li> 
<li>体育</li> 
<li>娱乐</li> 
</ul> 
</div> 
<div class="tab_box"> 
<div>时事</div> 
<div class="hide">体育</div> 
<div class="hide">娱乐</div> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
javascript函数重载解决方案分享
Feb 19 #Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 #Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 #Javascript
jQuery拖拽div实现思路
Feb 19 #Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 #Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 #Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 #Javascript
You might like
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
python友情链接检查方法
2015/07/08 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
银行求职信个人范文
2013/12/16 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
群众路线领导对照材料
2014/08/23 职场文书
2014年民警工作总结
2014/11/25 职场文书
党员干部学习心得体会
2016/01/23 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
SQL SERVER中的流程控制语句
2022/05/25 SQL Server