Загрузите контент в div, по умолчанию один

Question

У меня есть простое меню с <ul> s, каждая уль загружает его содержимое в div onclicking. Я пытаюсь установить загружаемый по умолчанию контент, когда посетитель откроет страницу для содержимого с идентификатором div1, а не со всем содержимым (div1 + div2 + div3 + div4), как сейчас. Вот мой код: http://jsfiddle.net/EPvGf/ При открытии страницы вверх вы можете увидеть

First Div 
Second Div 
Third Div 
Fourth Div 

загружены Я хочу только First Div быть загружены в качестве содержимого по умолчанию.

Answer 1

Обновлено вашу скрипку: http://jsfiddle.net/EPvGf/1/

$(document).ready(function() 
{ 
    $('#menu').on('click','a',function() 
    { 
     // fade out all open subcontents 
     $('.pbox:visible').fadeOut(); 
     // fade in new selected subcontent 
     $('.pbox[id='+$(this).attr('data-id')+']').fadeIn(); 
    }).find('a:first').click(); 
}); 

Действительно все, что я сделал нажмите первую a при загрузке страницы. Быстро и грязно.

Спрятать .pbox es нагрузка: добавить в css .pbox { display:none; }. Fiddle: http://jsfiddle.net/EPvGf/8/

Answer 2

Скрыть все div на событии готовности документа и показать только первый (по умолчанию, который вы хотите показать). Для того, чтобы показать, получить первый вы можете использовать метод first на коллекции

$(document).ready(function() 
{ 
    $('.pbox:visible').fadeOut(); 
    $('.pbox').first().fadeIn(); 

    //your other click event code goes here 
}); 

Работа образца: http://jsfiddle.net/EPvGf/6/

Answer 3

Вы можете также добавить некоторые CSS:

.pbox { display:none; } 
.in { display: block; } 

И изменить HTML:

<div class="pbox in" id="div1">First Div</div> 

Answer 4

Используйте этот код:

$(document).ready(function() 
{ 
    $('#div1').fadeIn(); 
    $('#menu').on('click','a',function() 
    { 
     // fade out all open subcontents 
     $('.pbox:visible').fadeOut(); 
     // fade in new selected subcontent 
     $('.pbox[id='+$(this).attr('data-id')+']').fadeIn(); 
    }); 
}); 

И добавить это правило к вашему стилю:

.pbox {display: none;}