jquery - 怎么做使用 jQuery 在页面加载时处于活动状态

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>

链接到演示- 显示 Tab 2 active onload 但这就是它的外观

感谢@Jack 快速正确的回复

Answer 1

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

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

演示

更新

如果您使用的是选项卡小部件，则应改为：

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

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

Answer 2

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

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

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

1是第二个选项卡，因为选项卡索引以0.

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

Answer 3

确保在加载元素时触发它

$(document).ready(function(){

   });

您还可以使用 jquery fadeIn/fadeOut

Answer 4

给所有你想一起显示的元素相同的类值然后：

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

Answer 5

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

你可以用这个

tabs-1, #tabs-2, #tabs-3, #tabs-4 { display:none }