強制div顯示在頁面加載 - jQuery/CSS

我正在建立一個單頁菜單，顯示/隱藏div'框架'，而不是加載新頁面。（幾乎）工作設置可以建立在This Pen上。我遇到的問題是默認顯示第一頁/幀，之後它的行爲與其餘的顯示塊/無切換操作一樣。強制div顯示在頁面加載 - jQuery/CSS

使用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(); 
})

請參閱所有代碼的筆，讓我知道，如果我可以展開任何東西。

來源

2016-12-09 Andyjm

你不應該.show()，而是更新文檔上的窗口散列，以便正確顯示。

然而，調整相應codepen只包含該數據塊：

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

見： $(document).ready(function() { window.location.hash = '#item-1'; })

來源

2016-12-09 12:03:20 jhnny

謝謝，同樣如下 - 我試過這個，但它保持'show（）'狀態，儘管點擊其他幀 – Andyjm

請參閱編輯版本。 – jhnny

這似乎工作:)我永遠不會想到使用散列 - 我需要看看 – Andyjm

onload是一個JavaScript事件，而不是一個jQuery的方法。

所以，jQuery的，你可以嘗試：

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

假設，你想這樣做在JavaScript中，你可以使用：

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

或

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

來源

2016-12-09 11:58:28 mrid

謝謝，我有這個，但它從來沒有失去它的'顯示'狀態，當點擊其他項目 – Andyjm

你的div沒有顯示在頁面加載？ – mrid

Updated codePen。

使用jQuery的解決辦法是：

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

單擊第一個frame的鏈接。

希望這會有所幫助。

來源

2016-12-09 12:19:14

強制div顯示在頁面加載 - jQuery/CSS

回答

相關問題