javascript - 单击按钮时.show() 不起作用

标签 javascript jquery html css stylus

我试图隐藏一个 div (class="login-form"),直到使用 jQuery 在我的 HTML 页面上按下登录按钮。但是,当我单击该按钮时,不会显示登录表单。这是为什么?

谢谢!

HTML-------------------------------------------- ------------------------------

<?php /* Template Name: Virtual-tour */ ?>
<head>

<link rel="stylesheet" href="stylus/main.css"/>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src=js/showLogin.js></script>
<script src=js/showCreateAccount.js></script>
<script src=js/submitLogin.js></script>
<script src=js/submitCreateAccount.js></script>
<script src=js/validate.js></script> -->

</head>

<body>

<div class="virtual-tour-media-player">

    <span> placeholder for media player</span>

</div>

<div class="instructions">

    Are you a family member or friend of a veteran on this memorial?</br></br>
    <span id="instruction-sub">
        Login or Create Account below to add additional information and memories.</br>
    </span>

    <button id="login">Login</button>
    <button id="create-account">Create Account</button>

</div>

<div class="login-form">
    <form>
        <input type="text" placeholder="Email Address" />
        <input type="password" placeholder="Password" />
    </form>
</div>

<script>
    $(document).ready(function() {
        $("#login").click(function(){
            $('.login-form').show();
        });

        $('#create-account').click(function{
            $(".create-account-form").show();
        });
    });
</script>

Stylus(CSS 预处理器,语法与 CSS 非常相似)------------------------------------ ------------------

body
    color #ffffff
    background-color #292929
    font-family 'Alegreya Sans', sans-serif

.virtual-tour-media-player
    width 90%
    height 40%
    margin auto
    border 3px solid white

.instructions
    padding-top 30px
    margin auto
    margin-top 5%
    font-size 100%
    width 45%
    height 22%
    text-align center
    background-color #740600
    box-shadow 2px 2px 2px 2px #232421

#instruction-sub
    font-size 15px
    //color #4d4d4d

button
    line-height 1.8
    border none
    color #f1f1f1
    background-color #0c083e
    margin auto
    margin-top 10%
    width 40%
    height 15%


button:hover
    background-color #292929

.login-form
    display none

最佳答案

解决方案:第二个 .click() 函数(针对 #create-account)缺少函数中的括号。它以其他方式工作。

关于javascript - 单击按钮时.show() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38839911/

相关文章:

javascript - 如果没有任何操作,我是否需要使用 HTML 表单标签?

javascript - 如何使用 extjs 根据 div id 将标签插入现有标签?

jquery - 使用 .after 添加 </tr><tr> 不起作用

javascript - HTML5/JavaScript "Save As"文件下载对话框

javascript - 如何检查单击时是否选中了复选框?

Javascript 将包含文件中的数据发布到父级

javascript - 在输入类型 ="number"中禁用直接值编辑

javascript - 为什么这个 xhtml 表单无法验证?

html - 如何用这样的 Bootstrap3 创建一个 3 列的布局?

javascript - 如何在 Angular 2 中为 .map rxjs 创建自定义函数