重构选项卡

Question

HTML：

<ul>
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
</ul>
<div id="tab1" class="tab-content">content 1</div>
<div id="tab2" class="tab-content">content 2</div>

jQuery

$('#mode li:first').addClass('active');
$('#mode li.active').append('<span class="arrow">&nbsp;</span>');
$('#mode li a').click(function () {
    $('#mode li').removeClass('active')
    $('.arrow').remove();
    $(this).parent().addClass('active').append('<span class="arrow">&nbsp;</span>');
    var a = $(this).attr('href');
    $('.tab-content').hide();
    $(a).show();
    return false;
});

..可以工作，但看起来很丑。可以进一步简化/减少吗？

非常感谢！

Answer 1

重构不多，但我对逻辑进行了一些编辑（假设 #mode 与 ul 相关），

$(function(){
    var mode = $('#mode');
    var arrow = $('<span/>', {'class': 'arrow'});
    $('li a', mode).bind('click.mytabs', function() {
        $('li', mode).removeClass('active');
        $(this).parent().addClass('active').append(arrow);
        var a = $(this).attr('href');
        $('.tab-content').hide();
        $(a).show();
        return false; 
    }).filter(':first').triggerHandler('click.mytabs'); // eq(0) works as well
});

请参阅 http://jsfiddle.net/wwMJL/ 进行现场演示

Answer 2

你知道，有些事情总是可以优化的。
将 $('#mode li') 放入变量中，因为 $()​​ 函数需要时间，
也可以将跨度的 HTML 字符串放入变量中，更好地进行重构。

如果您确实需要带有箭头类的跨度， 每里放跨度。
通过css来显示：none;如果它的父类处于活动状态，则会查看它。
少了两行;-)

<ul>
    <li class="active"><a href="#tab1">tab1</a><span> </span></li>
    <li><a href="#tab2">tab2</a><span> </span></li>
</ul>
<div id="tab1" class="tab-content">content 1</div>
<div id="tab2" class="tab-content">content 2</div>


        var li = $('#mode li');
//        $(li[0]).addClass('active');
        li.click(function () {
            li.removeClass('active');
            $(this).addClass('active');
            var a = $(this).find('a').attr('href');
            $('.tab-content').hide();
            $(a).show();
            return false;
        });

CSS: (这有效吗？我认为它有效......??)

    ul li span{
    display: none;
...positioning...
    }

    ul li.active span{
    display: block;
    }

Answer 3

//add some context to #mode li, .arrow, .tab-content, and a, ie. $("#id",)
$('#mode li')
    .find(":first").addClass('active').end()
    .find(".active").append('<span class="arrow"> </span>').end()
    .find('a').click(function () {
        var $this = $(this);
    $('.arrow').remove();
        $this.parent().parent().find("li.active").removeClass('active').end()
            .addClass('active').append('<span class="arrow"> </span>');
    var a = $this.attr('href');
    $('.tab-content').hide();
    $(a).show();
    return false;
});