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


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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
JavaScript 事件系统
Jul 22 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 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+MySQL的聊天室设计
2006/10/09 PHP
php 字符转义 注意事项
2009/05/27 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
js查错流程归纳
2012/05/04 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python集合常见运算案例解析
2019/10/17 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
英文版区域经理求职信
2013/10/23 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
质量保证书范本
2014/04/29 职场文书
企业文化演讲稿
2014/05/20 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
八年级数学教学反思
2016/02/17 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
MySQL 开窗函数
2022/02/15 MySQL
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL