Рефакторинг вкладок

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-строка для span может быть помещена в переменную, лучше для рефакторинга,

если вам действительно нужен диапазон с классом стрелки. поместите промежуток в каждую жизнь. положить его через css для отображения: нет; и если его родительский класс активен, он просматривается. на две строки меньше; -)

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

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">&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;
});