点击显示指定元素并隐藏其他同辈元素

 点击显示指定元素并隐藏其他同辈元素,下面有个不错的方法,需要的朋友可以参考下

 代码如下:
<!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> 
 
 

时间: 2024-10-29 18:27:03

点击显示指定元素并隐藏其他同辈元素的相关文章

jQuery搜索同辈元素方法_jquery

本文实例讲述了jQuery搜索同辈元素方法.分享给大家供大家参考.具体分析如下: 1. next()方法 用于搜索紧跟在每个匹配元素之后的单个同辈元素,根据需要还可以指定一个选择器对同辈元素进行筛选,语法格式如下: 复制代码 代码如下: next([selector]) $("p").next("p").css("color", "#FCF"); 2. nextAll()方法 用于搜索紧跟在每个匹配元素之后的所有同辈元素,根据

jquery siblings获取同辈元素用法实例分析_jquery

本文实例讲述了jquery siblings获取同辈元素用法.分享给大家供大家参考,具体如下: jquery siblings 用于获得匹配集合中每个元素的同胞. 语法: .siblings(selector) 注:可以通过后面的可选参数选择器(selector)进行进一步筛选. 示例: 找到每个div的所有同辈元素. <p>Hello</p> <div> <span>www.jb51.net</span> </div> <p&

jQuery元素的隐藏与显示实例

 这篇文章主要介绍了jQuery元素的隐藏与显示的方法,实例分析了hide与show的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery元素的隐藏与显示的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script t

javascript-按钮控制浮层显示和隐藏,点击时显示,离开时隐藏

问题描述 按钮控制浮层显示和隐藏,点击时显示,离开时隐藏 我在做的时候,网上找的js代码,用chrome调试的时候,点击按钮不会显示浮层容器, 提示栏在下面的display:block:上有一条横线杠掉.提示user agent stylesheet这里面 div { display: block; } 有谁能告诉我,哪里出问题了.急,在线等 解决方案 被横线杠掉的表示样式被覆盖,你查一下css 解决方案二: jquery有一个toggle().就是控制显示,隐藏的 不过只有1.8.2的版本适用

vueJS简单的点击显示与隐藏的效果

目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好 感觉跟适合. 演示效果:http://wjf444128852.github.io/demo/myVue/demo/demo9.html <!DOCTYPE html> <html lang="en"> <head> <meta c

android-当从grid view中点击时如何显示指定图像?

问题描述 当从grid view中点击时如何显示指定图像? 我使用一个grid view在程序中显示一些图像: <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_

文本显示-js点击显示再点击隐藏的问题,急求解答

问题描述 js点击显示再点击隐藏的问题,急求解答 相关代码如下 $(function(){ $(".serlist_bd_station_jingting").hide(); $(".stopdetail").click(function(){ $(".serlist_bd_station_jingting",this).toggle(300); }) }) <ul class="serlist_box_inner clearfi

360极速模式下可用的js实现按钮点击显示隐藏控件

问题描述 360极速模式下可用的js实现按钮点击显示隐藏控件 网上找了一些都只能在兼容模式或IE模式下实现 用360极速浏览器的极速模式无法实现 求一段可以在360浏览器里生效的代码 实现点击按钮隐藏一些控件(如div)并且显示另一些控件 解决方案 解决 chrome 浏览器对 div 的 display : none 不支持 试了很久,发现在style设置display:none的时候,IE是可以的,但是chrome不行 [html] view plaincopy在CODE上查看代码片派生到我

jquery-jsp中如何实现点击复选框显示指定的值

问题描述 jsp中如何实现点击复选框显示指定的值 例如 查询条件:(口 为复选框) 班级: 口 一班 口 二班 ... 学号: 口 一号 口 二号 ... . . 左边是查询条件,右边是图片,如果没有选择查询条件则显示全部图片 如果选择了查询条件则实时查询符合条件的图片并显示 求给点思路啊,各位大大们 解决方案 图片用属性记录下班级和学号,如下 <img cls="一班" num="1号"/> 然后jquery $(function () { $('班级