jquery - 将内容加载到一个 div 中，默认一个

Question

我有一个带有<ul>s 的简单菜单，每个 ul 将其内容加载到单击它的 div 中。我正在尝试将访问者打开页面时要加载的默认内容设置为具有 id 的内容，div1而不是现在的所有内容（div1 + div2 + div3 + div4）。这是我的代码： http: //jsfiddle.net/EPvGf/ 当您打开页面时，您可以看到

First Div
Second Div
Third Div
Fourth Div 

加载我只想First Div作为默认内容加载。

Answer 1

隐藏文档就绪事件上的所有 div 并仅显示第一个（您要显示的默认值）。要显示获取第一个，您可以first在集合上使用该方法

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

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

工作样本：http: //jsfiddle.net/EPvGf/6/

Answer 2

更新了你的小提琴：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在页面加载时单击第一个。又快又脏。

加载时隐藏.pboxes：添加到 css .pbox { display:none; }。小提琴：http: //jsfiddle.net/EPvGf/8/

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