javascript - 征求最优代码实现

Question

tab切换在web开发中很常见。请问如何用最少、最易维护的代码实现如下图的功能：点击左侧tab，右侧切换不同的内容。

类库使用jQuery。无需思路，只求代码，看看各位大神是怎么实现的。感激不尽

html结构

<p class="catalogue-content">
    <ul class="catalogue-parent">
        <li class="selected">男装</li>
        <li>女装</li>
        <li>童装</li>
    </ul>
    <p class="catalogue-child">
        <p class="catalogue-list">
            <p class="catalogue-line">
                <a href="#">男装1</a>
                <a href="#">男装2</a>
            </p>
        </p>
    </p>
    <p class="catalogue-child" style="display: none;">
        <p class="catalogue-list">
            <p class="catalogue-line">
                <a href="#">女装1</a>
                <a href="#">女装2</a>
            </p>
        </p>
    </p>
    <p class="catalogue-child" style="display: none;">
        <p class="catalogue-list">
            <p class="catalogue-line">
                <a href="#">童装1</a>
                <a href="#">童装2</a>
            </p>
        </p>
    </p>
</p>

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

Answer 6

代码如果下

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