如何使用jQuery在页面加载时激活<div>

Question

在页面加载时，我希望显示#tab-2活动，并在tab-2下显示内容。如何使用jQuery来做到这一点。我尝试过$('div > ul > li > a, #tabs-2').show();，但这不起作用。

<div id="tabs">
<ul>
<li><a href="#tabs-1"></a></li>
<li><a href="#tabs-2"></a></li>
<li><a href="#tabs-3"></a></li>
<li><a href="#tabs-4"></a></li>
</ul>

<div id="tabs-1">
"short" content
</div>

<div id="tabs-2">
"long" content
</div>

<div id="tabs-3">
"long" content
</div>

<div id="tabs-4">
"long" content
</div>

​

Link to demo -显示选项卡2活动的加载，但它看起来是这样的

感谢@Jack的快速而正确的回复

Answer 1

该演示显示您正在使用JQuery UI的选项卡。

初始化选项卡时，可以指定默认情况下哪个选项卡处于活动状态，如下所示：

$( "#tabs" ).tabs({ active: 1 });

因为选项卡索引以0开头，所以1是第二个选项卡。

要使其正常工作，您需要删除$('#tabs-2, a[href="#tabs-2"]').show();代码。

Answer 2

如果您想同时显示锚点和<div>元素：

$('#tabs-2, a[href="#tabs-2"]').show();

更新

如果您使用的是选项卡小部件，则应改为执行以下操作：

$( "#tabs" )
    .tabs({active: 1});

这将选择第二个选项卡并打开它。

Answer 3

确保在加载元素时触发它

$(document).ready(function(){

   });

您也可以使用jquery fadeIn/fadeOut。