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

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

这里是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>

感谢您的任何和所有帮助

来源

2012-08-03 Arken

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

$("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

来源

2012-08-03 19:22:02 Jlange

确定辉煌，我用你的编辑版本，它完美的作品，我只是想我要添加的另一个功能是从标题中打开一个特定的选项卡，所以如果你去的网页与'www.website.com/ mail.php？tab_id = 3'然后它会打开第三个标签打开页面，有没有办法使用eq做到这一点？ – Arken 2012-08-03 21:47:11

实际上并不担心那个评论，我只是认为我可以用一个PHP获取然后将结果打印到eq中。如果您还有其他解决方案，请尽管告诉我，谢谢。 – Arken 2012-08-03 21:49:15

要回答你的问题，是的，你可以确定使用php显示哪个页面。我很抱歉，因为我有一段时间没有做过php，但我认为你可以把php中的变量解析并放入eq函数中。例如：$（“ul.tabs li”）。eq（<？= $ phpVar？>）。addClass（“active”）。show（）;'确保$ phpVar是一个int。 – Jlange 2012-08-05 23:08:17

-1

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

有很多选项here。

来源

2012-08-03 17:41:44

他没有使用jQueryUI的。 – Jlange 2012-08-03 19:17:36

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

回答

相关问题