让一组div显示和隐藏的jquery特效

先说明需求：一个页面有多个div和button，一个div对应一个button，需要在点击的某个button的时候，显示对应的div，其余div隐藏

很简单，挨个写事件，在每个button的单击事件写入让本button对应的div显示，其他的隐藏。直接上代码：

$(document).ready(function(){$('#btn-div1').click(function(){$("#div1").show();$("#div2").hide();$("#div3").hide();$("#div4").hide();});$('#btn-div2').click(function(){$("#div1").hide();$("#div2").show();$("#div3").hide();$("#div4").hide();});$('#btn-div3').click(function(){$("#div1").hide();$("#div2").hide();$("#div3").show();$("#div4").hide();});$('#btn-div4').click(function(){$("#div1").show();$("#div2").hide();$("#div3").hide();$("#div4").show();});});

很好不是吗，解决了问题，已测试正常通过，nice work。

但是，雇主忽然又来了消息：需要加五组button和div。对很简单，再继续写上去，我估计换谁都有点不情愿了，设想一下，如果用户再让添加十个呢？二十个呢？更多呢？

得优化代码啊，效率啥的先不说，至少不能一直这样做很多无用功啊。

想了半天，用一个数组组织关系对，然后用函数优化操作，上代码：

$(document).ready(function(){  $("#div1").show();var name = ['#div1', '#div2', '#div3', '#div4'];$('#btn-div1').click(function(){test(0, name);});$('#btn-div2').click(function(){test(1, name);});$('#btn-div3').click(function(){test(2, name);});$('#btn-div4').click(function(){test(3, name);});});function test(m, name){$.each(name, function(n, item){if(m == n){$(item).show();}else{$(item).hide();}});}

当有新的关系对添加进来，只需要在数组中添加新的元素，就OK，感觉代码也不是那么臃肿了，简洁，高效～

如果有什么更好的方法，请留言告诉我，分享就是快乐～