jquery-ui - 如何在单击jQuery中的链接时显示第二个选项卡

Question

页面顶部有两个链接登录和注册。在页面正文中有两个选项卡登录和注册。单击登录时应显示登录选项卡，单击注册时应显示注册选项卡。这两个选项卡都存在于单独的 div 中，并且这两个 div 有一个父 div。目前我正在使用以下代码，它仅在单击两个链接时显示第一个选项卡：

    $("ul#myaccount-details-tabs").tabs("div#myaccount-details-panes>div");
        $(".tabs").each(function(){
        initTabs($(this).attr("id"));
    });

html代码如下：

     <div id="signin-info-tab-container" >
          <ul id="myaccount-details-tabs">
               <li><a href="#">sign-in</a></li>
              <li ><a href="#">create an account</a></li>
          </ul>
          <div id="myaccount-details-panes">
                 <div id="signin-details-panes">


                </div><!-- signin-details-panes-->
                <div id="register-details-panes">

                </div><!--register-details-panes-->
           </div><!--myaccount-detailes-panes-->
     </div><!--signin-info-tab-container-->

现在，我必须在单击页面顶部的注册链接时显示注册选项卡而不是登录选项卡。

Answer 1

提这个：

$('#tabs').tabs();

$('#sign-in').click(function(){    
    $("#tabs").tabs("select", "#tabs-1");        
});

$('#register').click(function(){    
    $("#tabs").tabs("select", "#tabs-2");        
});

在这里演示