我正在尝试将用户注册和用户登录都放在一页上。只有在用户单击选项卡以查看登录表单后,登录才可见。我只能显示注册表单,但单击登录按钮不会显示登录表。我的代码
<!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 an account and a kit containing the fonts used. see https://typekit.com/plans for 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 for 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 your business better.</p>
<br>
<div class="well">
<div class="row-fluid">
<span class="span12">
<h1 class="heading">Send messages to your 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 with 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 and 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. All rights reserved.</p>
</div>
</footer>
</body>
</html>