如何使用jQuery </div>使<div>在页面加载时处于活动状态

Question

在页面加载时，我想显示＃tab-2 active并在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活动onload，但这就是它的外观

感谢@Jack提供快速正确的回复

Answer 1

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

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

Demo

<强>更新

如果您正在使用标签小部件，则应该改为：

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

选择第二个标签并将其打开。

Answer 2

确保在加载元素时触发

$(document).ready(function(){

   });

您还可以使用jquery fadeIn / fadeOut

Answer 3

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

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

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

1是第二个标签，因为标签索引以0开头。

为此，您需要删除$('#tabs-2, a[href="#tabs-2"]').show();代码。

Answer 4

你在展示之前隐藏了另一个标签吗？

你可以用这个

tabs-1，＃tabs-2，＃tabs-3，＃tabs-4 {display：none}

Answer 5

将要显示的所有元素放在同一个类值中：

$(document).ready(function(){
 $('.classvalue').show();
});