为学习目的改进代码

时间:2013-09-27 12:19:21

标签: javascript jquery

我有三个标签,当我点击其中的每个标签时我想要导航。我写的代码工作得很好,但我认为编码不好,有任何方法可以改进这只是为了学习目的。感谢!!!!

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");
        });

1 个答案:

答案 0 :(得分:2)

如果可能的话用$替换jQuery(除非它与另一个库发生冲突)然后通过利用被点击元素的索引并调用切换函数将其简化为单个函数:

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

示例 - http://jsfiddle.net/gSKeL/