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


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 相关文章推荐
JS中的数组的sort方法使用示例
Jan 22 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
微信小程序登录换取token的教程
May 31 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
js实现星星海特效的示例
Sep 28 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 SOCKET编程详解
2015/05/22 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
Node.js的特点和应用场景介绍
2014/11/04 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Vue计算属性的使用
2017/08/04 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python的requests网络编程包使用教程
2016/07/11 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python和ruby,我选谁?
2017/09/13 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python短信轰炸的代码
2020/03/25 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
python中spy++的使用超详细教程
2021/01/29 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
中文系学生自荐信范文
2013/11/13 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
公司成立感言
2014/01/11 职场文书
航班延误投诉信
2015/07/02 职场文书
如何做好员工培训计划?
2019/07/09 职场文书