Вкладки: начальная загрузка страницы, показывающая все содержимое вкладки

Question

В моем нижнем колонтитуле у меня есть вкладки, которые на странице загружают все содержимое каждой вкладки/div. Но когда нажата вкладка, она выполняется так, как должна, показывая только содержимое из выбранной вкладки/div. Как бы я скрыть все остальные div/вкладки, чтобы отображать только первое активное содержимое div на первом представлении?

Это мой код до сих пор:

HTML

<ul id='tab'> 
    <li><a href='#' class="active" id="tab1">FOLLOW</a></li> 
    <li><a href='#' id="tab2">NEWSLETTER</a></li> 
    <li><a href='#' id="tab3">SITE INFORMATION</a></li> 
</ul> 
<div id="cnt-footer"> 
<div id='cnt-tab1'> 
<div id='cnt-tab2'> 

Javascript

$(document).ready(function() { 
    $('#tab a').click(function (ev) { 
    ev.preventDefault(); 

    var el = $(this), target = el.attr('id'); 

    if(el.hasClass('active')) return; 

    $('#tab a').removeClass('active'); 
    el.addClass('active'); 

    $('#cnt-footer>div').hide(); 
    $("#cnt-footer>div:not(:first)").hide(); 
    $('#cnt-footer #cnt-' + target).fadeIn('fast'); 
    }); 
}); 

Любая помощь будет принята с благодарностью ..

Answer 1

Попробуйте это: Sample

$(document).ready(function() { 
$("#cnt-footer>div:not(:first)").hide(); 
$('#tab a').click(function (ev) { 
    ev.preventDefault(); 

    var el = $(this), 
     target = this.id; 

    if (el.hasClass('active')) return; 

    $('#tab a').removeClass('active'); 
    el.addClass('active'); 

    $('#cnt-footer>div').hide(); 
    $('#cnt-footer #cnt-' + target).fadeIn('fast'); 
}); 
}); 

Answer 2

Вы можете установить отображение неактивных элементов в скрытое в HTML. Таким образом, вы не полагаетесь на браузер пользователя, чтобы скрыть элементы на document.ready

<ul id='tab'> 
    <li><a href='#' class="active" id="tab1">FOLLOW</a></li> 
    <li><a href='#' id="tab2">NEWSLETTER</a></li> 
    <li><a href='#' id="tab3">SITE INFORMATION</a></li> 
</ul> 
<div id="cnt-footer"> 
<div id='cnt-tab1' style='display: hidden'> 
<div id='cnt-tab2' style='display: hidden'>