javascript - Unable to call a specific Jquery tab -
i new jquery. trying build sign page website. had used jquery verticle tabs display login- tab 1, register- tab-2, , guest tab3. issue have hyperlink on log in tab says "dont have account- sign up".when clicking on hyperlink supposed go register tab in same page.
i did try giving hyperlink getting appended in url not going tab. below code. please help.![
<%@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 { 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
got anser question. had use function
$("#link1").click(function(){ $("#tabs").tabs({active:1}); return false; })
and provide hyperlink in html form <a href="#" id="link1">sign up</a>
Comments
Post a Comment