javascript - 出于学习目的改进代码

Question

我有三个选项卡，我想在单击每个选项卡时进行导航。我写的代码工作得很好，但我认为这是糟糕的编码，有任何改进的方法只是为了学习目的。谢谢！！！！

jQuery(".nuestra_actualidad li:eq(0)").click(function() {
            jQuery("#tabs-actualidad").css("display","block");
            jQuery("#tabs-articulos").css("display","none");
            jQuery("#tabs-noticias").css("display","none");
        });
 jQuery(".nuestra_actualidad li:eq(1)").click(function() {
            jQuery("#tabs-actualidad").css("display","none");
            jQuery("#tabs-articulos").css("display","block");
            jQuery("#tabs-noticias").css("display","none");
        });

 jQuery(".nuestra_actualidad li:eq(2)").click(function() {
            jQuery("#tabs-actualidad").css("display","none");
            jQuery("#tabs-articulos").css("display","none");
            jQuery("#tabs-noticias").css("display","block");
        });

Answer 1

Replacing jQuery with $ if possible (unless it clashes with another library) and then it can be reduced to a single function by utilising the index of the clicked element and calling the toggle function:

$(".nuestra_actualidad li").click(function() {
    var index = $(this).index();
    $("#tabs-actualidad").toggle(index === 0);
    $("#tabs-articulos").toggle(index === 1);
    $("#tabs-noticias").toggle(index === 2);
});

Example - http://jsfiddle.net/gSKeL/