Форсировать div для отображения на странице загрузки - jQuery/CSS

Question

Я создаю одностраничное меню, которое отображает/скрывает div 'frames' вместо загрузки новых страниц. Рабочую установку (почти) можно найти на This Pen. Проблема, которую я имею, показывает по умолчанию первую страницу/фрейм, и после этого она ведет себя так же, как остальные, при переключении между блоком отображения/none.

Использование CSS/jQuery (в зависимости от того, что является более чистым), как я могу показать первый кадр по умолчанию? Это кажется разочаровывающим, но я не могу обойти его. Для справки мой JQuery и CSS ниже:

#item-1, #item-2, #item-3, #item-4, #item-5 { 
    display: none; 
} 
#item-1:target, #item-2:target, #item-3:target, #item-4:target, #item-5:target { 
    display:block; 
} 

//show first frame on page load 
$('window').onload(function() { 
    $('#item-1').show(); 
}) 

Пожалуйста, обратитесь к Pen для всего кода и дайте мне знать, если я могу расширить на что-нибудь.

Answer 1

Вы не должен .show(), а скорее обновить хеш окна на документе, готовом для правильного отображения.

Однако, настроить ваш codepen соответственно содержат только этот блок:

$(document).ready(function() { 
    //show first frame on page load 
    $('#item-1').show(); 
}) 

см: $(document).ready(function() { window.location.hash = '#item-1'; })

Answer 2

onload - событие javascript, а не метод jquery.

Так, в JQuery, вы можете попробовать:

$(document).ready(function(){ 
    $('#item-1').show(); 
}); 

Предположим, вы хотите сделать это в JavaScript, вы можете использовать:

window.onload = $('#item-1').show(); 

или

window.onload = document.getElementById('item-1').display = 'block'; 

Answer 3

Updated codePen.

Использование JQuery решения может быть:

$(document).ready(function() { 
    $('a[href="#item-1"]')[0].click(); 
}) 

Нажав на ссылку на первые frame.

Надеюсь, это поможет.