使用jQuery激活页面加载中的第二个选项卡 [英] Activating second tab in page load using jquery

查看:112
本文介绍了使用jQuery激活页面加载中的第二个选项卡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何在页面加载中激活网页的第二个选项卡,我已经使用jquery和ul完成了这些选项卡.

how can i activate the second tab of my web page in page load , i have done the tabs using jquery and ul.

下面是代码

<div class="tabcontainer">
  <ul class="tabs">
    <li><a href="#tab1">Saved Recipes</a></li>
    <li><a href="#tab2">Groups</a></li>
    <li><a href="#tab3">Friends</a></li>
    <li><a href="#tab4">My Recipes</a></li>
  </ul>
</div>

<div class="tab_container">
<!-- Tab 1 Starts Here  -->
  <div id="tab1" class="tab_content"></div>    
  <div id="tab2" class="tab_content"></div>
  <div id="tab3" class="tab_content"></div>    
  <div id="tab4" class="tab_content"></div>    
</div>

脚本:

$(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;
    });
});

我知道如何激活第一个和最后一个,但是如何在页面加载期间激活第二个和第三个.

I know how to activate first and last one, but how can i activate the second and third one during page load.

请帮助...

推荐答案

使用与哈希匹配的jQuery选择器,然后单击它:

Use a jQuery selector that matches the hash, and click it:

$('.tabs li a[href=\#tab2]').click();

这篇关于使用jQuery激活页面加载中的第二个选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆