javascript - Unable to switch Bootstrap Tabs -
i trying place both user registration , user login on one-page. login visible after user clicks on tab view login form. can registration form appear, clicking on login button not show login form. code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="https://fonts.googleapis.com/css?family=limelight|flamenco|federo|yesteryear|josefin sans|spinnaker|sansita one|handlee|droid sans|oswald:400,300,700" media="screen" rel="stylesheet" type="text/css" /> <link href="static/home/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> <link href="static/home/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" /> <link href="static/home/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> <link href="static/home/stylesheets/fontawesome.css" media="screen" rel="stylesheet" type="text/css" /> <link href="static/home/stylesheets/project.css" media="screen" rel="stylesheet" type="text/css" /> <link href="static/home/stylesheets/landing-page-tour.css" media="screen" rel="stylesheet" type="text/css" />" <!-- typekit fonts require account , kit containing fonts used. see https://typekit.com/plans details. <script type="text/javascript" src="//use.typekit.net/your_kit_id.js"></script> <script type="text/javascript">try{typekit.load();}catch(e){}</script> --> <title>landing page tour</title> </head> <body> <div class="container"> <div class="hero-unit"> <h1 class="heading"> <strong>never late (beta)</strong> </h1> <div class="btns"></div> </div> <br> <div class="row-fluid"> <span class="span6"> <p class="home-header">the service small businesses. </p> <br> <p class="p-1 p-2 message">increase business revenue,</p> <p class="p-1 p-2 message">increase customer satisfaction,</p> <p class="p-1 p-2 message">run business better.</p> <br> <div class="well"> <div class="row-fluid"> <span class="span12"> <h1 class="heading">send messages customers</h1> </span> <span class="span9"> <h4 class="heading">reduce revenue</h4> <h4 class="heading">collect complaints on time</h4> <h4 class="heading">reduce time spent calling customers</h4> </span> </div> </div> </span> <span class="span6"> <p class="p-2 p-4">get started 10 free complaints today</p> <br> <div class="span7"> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1" data-toggle="tab"> <h4>new user</h4></a> </li> <li> <a href="#tab2" data-toggle="tab"><h4>existing user</h4></a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <form class="form-horizontal" action=""> <div class="control-group"> <div class="controls"> <input class="textinput input-xlarge" autofocus="autofocus" type="text" name="" value="" placeholder="first name..."> </div> <div class="controls"> <input class="textinput input-xlarge" type="text" name="" value="" placeholder="last name"> </div> <div class="controls"> <input class="textinput input-xlarge" type="password" name="" placeholder="password"> </div> <div class="controls"> <input class="textinput input-xlarge" type="email" name="" value="" placeholder="email address"> </div> </div> <button class="btn btn-success">click here continue</button> </form> </div> <div class="tab-pane" id="tab2"> {% if form.errors %} <p> "your username , password didn't match. please try again." </p> {% endif %} </form> <form class="form-horizontal" method="post" action="{% url 'login' %}"> {% csrf_token %} <div class="page-header"> <h4> "welcome back, please login"</h4> </div> <div class="control-group"> <label class="control-label" for="inputemail">{{ login_form.username.label_tag }}</label> <div class="controls"> {{ login_form.username }} </div> </div> <div class="control-group"> <label class="control-label" for="inputpassword">{{ login_form.password.label_tag }}</label> <div class="controls"> {{ login_form.password }} </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> "remember me"</label> <button type="submit" class="btn"> "login" </button> <input type="hidden" name="next" value="{{ next }}" /> </div> </div> </form> </div> </div> </div> </div> </div> </span> </div> </div> <script src="/static/bootstrap/js/bootstrap-tab.js"></script> <script src="/static/js/custom.js"></script> <footer> <div class="container"> <p>© copyright 2013 never late. rights reserved.</p> </div> </footer> </body> </html>
Comments
Post a Comment