jQuery代码简化 [英] jQuery code to simplify

问题描述

我有这段代码，但是它有点重复，有没有办法使它更短?

I've got this code but it's a bit repeating itself, is there a way to make it shorter?

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

推荐答案

allTabs.click(function() {
    event.preventDefault();
    allTabs.hide();
    var id = jQuery(this).attr('id');
    var el = jQuery('#'+id.substring(0,id.indexOf('-')));
    el.show();
});

这篇关于jQuery代码简化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！