你这是要脑洞大开的节奏啊，那就先抛砖引玉了,在数据上要做一下改动.
首先声明，下面的代码没有经过测试的，只是顺手而为的，正确性自己试验了

<ul class="catalogue-parent">
    <li class="selected" data-index="0">男装</li>
    <li data-index="1">女装</li>
    <li data-index="2">童装</li>
</ul>

var $catalogueChild = $('.catalogue-child');
$('ul.catalogue-parent').find('li').on('click', function() {
    $catalogueChild.hide().eq($(this).attr('data-index')).show();
});

或者这样呢

var $catalogueChild = $('.catalogue-child');
$('ul.catalogue-parent').find('li').each(function(i) {
    $(this).on('click', function() {
        $catalogueChild.hide().eq(i).show();
    });
});

<script>
    $(function(){
        $(".catalogue-parent li").bind("click",function(){
            $(".catalogue-child").hide().eq($(".catalogue-parent li").index(this)).show();
        })
    })
</script>

无需思路，只求代码
你这是耍流氓嘛

易维护要看怎么个维护法，比如加减tab是维护？横的变竖的是维护？改颜色改大小算维护？鼠标点击改上浮算维护？还是只要没bug不用改就算维护了？

总之“最易维护”是伪命题

另外，看代码是学不到思想的，别说思想了，就算是算法也很难看代码就看懂

懒人之家这个好像挺适合你的，不管出于什么目的吧，这么的tab切换很多

代码如果下

$(function(){
        //绑定tab的点击事件
        $('.catalogue-parent > li').on('click',function(){
            if($(this).hasClass('selected')){ //点击的是当前显示的 li
                return false; //直接返回
            } else { //点击的不是当前显示的 li
                $(this).siblings('.selected').removeClass('selected')
                .end().addClass('selected');  //给点击的 li, 添加selected

                var indexOfthis = $(this).index('.catalogue-parent > li');
                $('.catalogue-child').hide().eq(indexOfthis).show(); //显示对应的内容

                return false;
            }
        });
    });