简化的 jQuery 代码

Question

我已经有了这段代码，但它有点重复，有办法让它更短吗？

 jQuery(document).ready(function() {
    var allTabs = jQuery('#front, #blog, #portfolio, #pages, #colors, #fonts');
    allTabs.hide();

    jQuery('#front-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#front').show();
    });

    jQuery('#blog-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#blog').show();
    });

    jQuery('#portfolio-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#portfolio').show();
    });

    jQuery('#pages-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#pages').show();
    });

    jQuery('#colors-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#colors').show();
    });

    jQuery('#fonts-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#fonts').show();
    });
});

Answer 1

您可以使用jQuery's multiple selector :

$("#fonts-show,#pages-show,#portfolio-show,#blog-show,etc...").click(function() {
    event.preventDefault();
    allTabs.hide();
    $("#"+$(this).attr("id").split("-")[0]).show();
});

编辑:没有注意到选择器之间的不同 id。编辑了演出声明以纠正此问题。