javascript - 征求最优代码实现

Question

tab切换在web开发中很常见。请问如何用最少、最易维护的代码实现如下图的功能：点击左侧tab，右侧切换不同的内容。 类库使用jQuery。无需思路，只求代码，看看各位大神是怎么实现的。感激不尽 html结构 {代码...}

伊谢尔伦 · Answer

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


    男装
    女装
    童装

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

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

大家讲道理 · Answer

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

阿神 · Answer

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

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

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

PHPz · Answer

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

阿神 · Answer

代码如果下

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

javascript - 征求最优代码实现

reply all(6)I'll reply