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

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

Answer 2

隐藏文档就绪事件中的所有div并仅显示第一个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;}

将内容加载到div中，默认值为div

4 个答案: