Refactoring Tabs
- by Nimbuz
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"> </span>');
$('#mode li a').click(function () {
$('#mode li').removeClass('active')
$('.arrow').remove();
$(this).parent().addClass('active').append('<span class="arrow"> </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!
