Question

我是Jquery的新手。我正在尝试为我的网站建立一个注册页面。我使用了Jquery Verticle选项卡来显示Login-tab 1，Register-tab-2和Guest Tab3。但问题是我在登录标签上有一个超链接，表示＆＃34;没有帐户 - 注册＆＃34;。点击此超链接时，应该转到同一页面的“注册”选项卡。

我确实试过提供一个超链接，但它只是附加在URL中，但实际上没有进入选项卡。下面是代码。请帮忙。![

    <%@taglib prefix="html" uri="/WEB-INF/struts-html.tld" %>
    <%@taglib prefix="logic" uri="/WEB-INF/struts-logic.tld" %>
    <%@taglib prefix="bean" uri="/WEB-INF/struts-bean.tld" %>
    <%@page contentType="text/html" pageEncoding="UTF-8"%>



     <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>jQuery UI Tabs - Vertical Tabs functionality</title>
          <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-    ui.css">
         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
         <link rel="stylesheet" href="/resources/demos/style.css">
         <script>
        $(function() {
        $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
        $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
        });
        </script>


        <style>
        .ui-tabs-vertical { width: 55em; }
        .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
        .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px   !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
        .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
         .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right:  .1em; border-right-width: 1px; border-right-width: 1px; }
           .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
          </style>
         </head>



            <tr>
       <td colspan="3">
       <p align="center">

           <img align="center" src="images/abc.jpg" width="818" height="153" align=center/><br/><br/><br/><br/>

       <div id="tabs">
        <ul>
          <li><a href="#tabs-1">Login</a></li>

          <li><a href="#tabs-2">Register</a></li>
            <li><a href="#tabs-3">Guest</a></li>
       </ul>
        <div id="tabs-1">
             <html:form  method="post" action="login.do"> 

               Username<br/>

               <html:text property="usrname" size="47"/><br/><br/>
          Password<br/>
           <html:password property="pwd" size="47"/> <br/><br/>

            <html:submit value="Login" /> 

          <li><a href="#tabs-2">Register</a></li>

          </html:form>


          </div>
         <div id="tabs-2">
            <html:form  method="post" action="register.do">  

            <div> 




           Name<br/>
          <html:text property="fname" />
          <html:text property="lname" /></br></br>

        Choose Username</br>

        <html:text property="usrname" size="47"/></br></br>

        Create Password</br>

        <html:password property="pwd" size="47"/> </br></br>

        Confirm Password</br>
        <html:password property="cnpwd" size="47"/> </br></br>

        DOB </br>
        <html:text property="dob" styleId="dob" size="47"/> </br></br>
        Address Line 1</br>

         <html:text property="add1" size="47"/></br></br>

        Address Line 2 </br>

         <html:text property="add2" size="47"/></br></br>



        Mobile Number</br>

        <html:text property="mno" size="47"/></br></br></br>

        <html:submit value="Register"/>


        <div

        align="center">

        </div>
        </div>

               </html:form>     
          </div>






          <div id="tabs-3">
            <h2>Content heading 3</h2>
            <p></p>
          </div>
        </div>


        </body>
        </html>


        `][1]` help.


          [1]: http://i.stack.im

gur.com/cZNtD.png

Answer 1

得到了这个问题的答案。我不得不使用一个函数

$("#link1").click(function(){
    $("#tabs").tabs({active:1});
    return false;

})

并在我的html表单<a href="#" id="link1">Sign Up</a>

中提供超链接

无法调用特定的Jquery选项卡

1 个答案: