编程 Javascript

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

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 无符号右移赋值操作

Apr 17 Javascript

JS滚轮事件onmousewheel使用介绍

Nov 01 Javascript

JavaScript中for..in循环陷阱介绍

Nov 12 Javascript

JavaScript中的关联数组问题

Mar 04 Javascript

Node.js 异步编程之 Callback介绍（一）

Mar 30 Javascript

js字符串引用的两种方式(必看)

Sep 18 Javascript

jQuery事件与动画基础详解

Feb 23 Javascript

微信小程序实现跟随菜单效果和循环嵌套加载数据

Nov 21 Javascript

详解vue mixins和extends的巧妙用法

Dec 20 Javascript

layui数据表格跨行自动合并的例子

Sep 02 Javascript

解决vue项目router切换太慢问题

Jul 19 Javascript

Element Notification通知的实现示例

Jul 27 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