制作第二个标签第一个活动

Question

我有这个非常知名的脚本，我正在努力工作，目前它的一切都很好，但是当您第一次打开页面时，它会显示第一个标签，因为它应该，想要显示第二个标签。 （第一只是一个邮件撰写选项卡，第二个是实际的收件箱）

这里是JavaScript

<script type="text/javascript"> 

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
     return false; 
    }); 

}); 

</script> 

这里是选项卡中的HTML

> <ul class="tabs"> 
>  <li><a href="#compose" class="compose"></a></li> 
>  <div id="mail_sidebar_top"> 
>   <li><a href="#inbox" class="inbox">Inbox(0)</a></li> 
>   <li><a href="#sent_mail" class="sent_mail">Sent Mail(0)</a></li> 
>   <li><a href="#trash" class="trash">Trash(0)</a></li> 
>   <li><a href="#reported" class="reported">Reported</a></li> 
>   <li><a href="#drafts" class="drafts">Drafts</a></li> 
>   
>  </div><!---end mail_sidebar_top---> 
>  
>  <div id="mail_sidebar_middle"> 
>   <li><a href="#notifications" class="notifications">Notifications</a></li> 
>   <li><a href="#alerts" class="alerts">Alerts</a></li> 
>   
>  </div><!---end mail_sidebar_top---> 
>  
>  </ul> 

感谢您的任何和所有帮助

Answer 1

为了显示第二个选项卡，更改这些线

$("ul.tabs li:eq(1)").addClass("active").show(); //Activate second tab 
    $(".tab_content:eq(1)").show(); //Show second tab content 

基本上，在当前版本中，当加载页面时，你添加一个基于jQuery选择激活的标签内容和课程。由于您的html内容与选项卡的顺序相同，而不是使用第一个实例的选择器（即:first），因此我们可以将其更改为:eq(1)。 （在这种情况下，它是一个，因为jquery引用数组中的DOM元素，所以第一个选项卡位于索引0，第二个位于索引1）。要在开始时显示不同的选项卡，只需将:eq(1)更改为:eq(n)，其中n是所需选项卡的数组索引。

编辑一个更好的解决方案，因为它增加了一个性能提升使用的jQuery提供的实际EQ（）函数：

$("ul.tabs li").eq(1).addClass("active").show(); //Activate second tab 
    $(".tab_content").eq(1).show(); //Show second tab content 

Answer 2

$(".tabs").tabs({ 
    selected: 1 
}); 

有很多选项here。