无法切换Bootstrap选项卡

时间:2013-05-21 23:52:41

标签: javascript jquery django

我正在尝试将用户注册和用户登录都放在一页上。 只有在用户单击选项卡以查看登录表单后,才能看到登录信息。 我只能显示注册表单,但点击登录按钮将不会显示登录表单。 我的代码

<!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>

0 个答案:

没有答案