重构选项卡

重构并不多,但我对逻辑进行了一些编辑(假设 #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/

你知道,有些东西是可以优化的。 将$('#mode li')放入变量中,因为$()函数需要时间,

如果你真的需要箭头类的跨度。把跨度放在每一里。

<ul>
    <li class="active"><a href="#tab1">tab1</a><span>&nbsp;</span></li>
    <li><a href="#tab2">tab2</a><span>&nbsp;</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;
    }

//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">&nbsp;</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">&nbsp;</span>');
    var a = $this.attr('href');
    $('.tab-content').hide();
    $(a).show();
    return false;
});