如何让代码更简单，如果我需要点击a eq(0) show b eq(0)隐藏他人，a eq(1) show b eq(1)隐藏他人？

Question

如何让下面的代码更简单，更少？

谢谢。

<div class="btn"><div>0</div><div>1</div><div>2</div></div>
<div class="content"><div>0</div><div>1</div><div>2</div></div>

$('.btn div:eq(0)').click(function(){
    $('.content div').hide();
    $('.content div:eq(0)').show();
});
$('.btn div:eq(1)').click(function(){
    $('.content div').hide();
    $('.content div:eq(1)').show();
});
$('.btn div:eq(2)').click(function(){
    $('.content div').hide();
    $('.content div:eq(2)').show();
});
$('.btn div:eq(3)').click(function(){
    $('.content div').hide();
    $('.content div:eq(3)').show();
});

Answer 1

$(".btn div").click(function () {
   $(".content div").hide().eq($(".btn div").index(this)).show();
});

http://jsfiddle.net/Xepmg/

Answer 2

尝尝这个

$('.btn div').click(function(){
    $('.content div').hide();
    $('.content div:eq('+$(this).index()+')').show();
});

jsfiddle

Answer 3

你可以这样做：

var numClicked = '';

$('.btn div').on('click', function() {
     numClicked = $('.btn div').index(this);
     $('.content div').hide();
     $('.content div').eq(numClicked).show();
});

还有一种更好的方法，尽管我不能完全记住它是如何做到的。