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

.. works, but looking ugly. Can it be simplified/reduced further?

Many thanks!