將內容加載到一個div中，默認一個

我有一個簡單的菜單<ul> s，每ul將它的內容加載到一個div中點擊它。我試圖設置當訪問者打開頁面時要加載的默認內容，其編號爲div1，而不是現在的所有內容（div1 + div2 + div3 + div4）。這裏是我的代碼：http://jsfiddle.net/EPvGf/ 當您打開網頁了，你可以看到將內容加載到一個div中，默認一個

First Div 
Second Div 
Third Div 
Fourth Div

加載我只想First Div被加載爲默認的內容。

來源

2013-06-12 user2401856

更新您的提琴：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 on load：加入css .pbox { display:none; }。小提琴：http://jsfiddle.net/EPvGf/8/

來源

2013-06-12 15:53:35

但它加載所有這些，然後在第一個消失，我希望它在第一個淡出，而無需加載整個內容首先你加載頁面 – user2401856

然後添加'.pbox {display：none; ''給你的CSS。 –

完美，謝謝 – user2401856

隱藏文檔就緒事件中的所有div並僅顯示第一個div（您要顯示的默認值）。爲了顯示讓你可以使用first方法上集合

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

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

工作示例第一個：http://jsfiddle.net/EPvGf/6/

來源

2013-06-12 15:57:00 Shyju

但它加載它們然後在第一個中淡出，我希望它在第一個中淡入，而不加載整個內容首先加載頁面 – user2401856

@ user2401856：您可以更新您的HTML/CSS以顯示所有/任何你想要的在頁面加載。 – Shyju

您還可以添加一些CSS：

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

，並更改HTML：

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

來源

2013-06-12 16:00:26

使用此代碼：

$(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;}

來源

2013-06-12 16:00:37

Woa 3鍵入我的答案:) –

將內容加載到一個div中，默認一個

回答

相關問題