Автоматические активные табы

<script>jQuery(document).ready(function() {
    jQuery('.tabs a').click(function(){
        switch_tabs(jQuery(this));
});
switch_tabs(jQuery('.defaulttab'));
});
function switch_tabs(obj)
{
    jQuery('.tab-content').hide();
    jQuery('.tabs a').removeClass("selected");
    var id = obj.attr("rel");
    jQuery('#'+id).show();
    obj.addClass("selected");
}</script>


                 <ul class="tabs">
    [xfgiven_lost]<li><a href="#" rel = "tab-1" class = "defaulttab">Лостфильм</a></li>[/xfgiven_lost]
    [xfgiven_bab]<li><a href="#" rel = "tab-2">Бабайко</a></li>[/xfgiven_bab]
    [xfgiven_new]<li><a href="#" rel = "tab-3">Ньюстудио</a></li>[/xfgiven_new]
    [xfgiven_sub]<li><a href="#" rel = "tab-4">Субтитры</a></li>[/xfgiven_sub]
</ul>
[xfgiven_lost]<div class = "tab-content" id = "tab-1"><iframe  rel="nofollow" src="[xfvalue_lost]" width="600" height="370" frameborder="0"></iframe>
</div>[/xfgiven_lost]
[xfgiven_bab]<div class = "tab-content" id = "tab-2"><iframe  rel="nofollow" src="[xfvalue_bab]" width="600" height="370" frameborder="0"></iframe>
</div>[/xfgiven_bab]
[xfgiven_new]<div class = "tab-content" id = "tab-3"><iframe  rel="nofollow" src="[xfvalue_new]" width="600" height="370" frameborder="0"></iframe>
</div>[/xfgiven_new]
[xfgiven_sub]<div class = "tab-content" id = "tab-4"><iframe  rel="nofollow" src="[xfvalue_sub]" width="600" height="370" frameborder="0"></iframe>
</div>[/xfgiven_sub]

Скажите пожалуйста, что нужно изменить или дописать, что бы первый ТАБ в котором есть содержимое отображался автоматом а не только по клику, независимо от того стоит он первый, пятый или десятый.

При загрузке странички: Таб 3 отображается так. http://firepic.org/images/2015-03/09/z2k742du3uox.png При клике на него вот так: http://firepic.org/images/2015-03/09/9g2x5q8v836d.png И нужно что бы при загрузке было так если в каком-то табе есть контент.