十三个链接对应十三个div,用jquery怎么控制点击某个链接显示对应的div,其他隐藏,
每个链接对应自己的div,现在主要的问题是怎么排除已经显示的那个div;我是利用a标签数组的下标来找到对应的div!代码如下:vara=$("table[id=fenle...
每个链接对应自己的div,现在主要的问题是怎么排除已经显示的那个div;
我是利用a标签数组的下标来找到对应的div!
代码如下:
var a = $("table[id=fenleibiaoge] a");
$("table[id=fenleibiaoge] a").click(function(){
$.each(a,function(index,value){
//alert(index);
switch(index){
case 1:$("div[id=jinzuan]").show(),$("div[id=tupian] img").hide();break;
case 2:$("div[id=dongmeng]").show(),$("div[id!=dongmeng]").hide();break;
case 3:$("div[id=zhongya]").show(),$("div[id!=zhongya]").hide();break;
case 4:$("div[id=jinzhuan]").show(),$("div[id!=jinzhuan]").hide();break;
case 5:$("div[id=shanghe]").show(),$("div[id!=shanghe]").hide();break;
case 6:$("div[id=oumeng]").show(),$("div[id!=oumeng]").hide();break;
case 7:$("div[id=ameng]").show(),$("div[id!=ameng]").hide();break;
case 8:$("div[id=haiwan]").show(),$("div[id!=haiwan]").hide();break;
case 9:$("div[id=beimei]").show(),$("div[id!=beimei]").hide();break;
case 10:$("div[id=nanmei]").show(),$("div[id!=nanmei]").hide();break;
case 11:$("div[id=dongbei]").show(),$("div[id!=dongbei]").hide();break;
case 12:$("div[id=xinao]").show(),$("div[id!=xinao]").hide();break;
}
});
求大神!!! 展开
我是利用a标签数组的下标来找到对应的div!
代码如下:
var a = $("table[id=fenleibiaoge] a");
$("table[id=fenleibiaoge] a").click(function(){
$.each(a,function(index,value){
//alert(index);
switch(index){
case 1:$("div[id=jinzuan]").show(),$("div[id=tupian] img").hide();break;
case 2:$("div[id=dongmeng]").show(),$("div[id!=dongmeng]").hide();break;
case 3:$("div[id=zhongya]").show(),$("div[id!=zhongya]").hide();break;
case 4:$("div[id=jinzhuan]").show(),$("div[id!=jinzhuan]").hide();break;
case 5:$("div[id=shanghe]").show(),$("div[id!=shanghe]").hide();break;
case 6:$("div[id=oumeng]").show(),$("div[id!=oumeng]").hide();break;
case 7:$("div[id=ameng]").show(),$("div[id!=ameng]").hide();break;
case 8:$("div[id=haiwan]").show(),$("div[id!=haiwan]").hide();break;
case 9:$("div[id=beimei]").show(),$("div[id!=beimei]").hide();break;
case 10:$("div[id=nanmei]").show(),$("div[id!=nanmei]").hide();break;
case 11:$("div[id=dongbei]").show(),$("div[id!=dongbei]").hide();break;
case 12:$("div[id=xinao]").show(),$("div[id!=xinao]").hide();break;
}
});
求大神!!! 展开
2个回答
展开全部
不要用数组下标来定位要显隐的<div>,后期不好维护,每增减一个都可能需要更改一片代码,给<a>标签增加自定义属性来关联要显示的<div>,可按照如下方式改造:
1) 假设所有的这些要显隐的<div>都具有class“area”;
2) 给所有<a>标签所在的外层<table>绑定事件而不是给所有的<a>标签都绑定事件。
// 假设<a>标签使用自定义属性“targetDiv”来关联要显示的<div>的id:
// <a href="..." target="..." targetDiv="jinzuan">...</a>
// <a href="..." target="..." targetDiv="dongmeng">...</a>
// 事件代理:给id为“fenleibiaoge”下所有具有自定义属性“targetDiv”的<a>标签注册单击事件代理响应:
$('#fenleibiaoge').delegate('a[targetDiv]', 'click', function(){
$('.area').hide(); // 隐藏所有要被显隐控制的<div>
$('#' + this.attr('targetDiv')).show(); // 显示被点击<a>标签所关联的<div>
});
不知是否满足需求。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询