Javascript 表格不'；Don’我不会在提交时向上移动_Javascript_Jquery_Html

Javascript 表格不'；Don’我不会在提交时向上移动

javascript jquery html

Javascript 表格不'；Don’我不会在提交时向上移动,javascript,jquery,html,Javascript,Jquery,Html,我正试图将窗体向上移动几个像素，但这不起作用。我不知道为什么我提交时正在调用该函数（我已经用alert（）对其进行了测试），但css部分不起作用代码如下： <!DOCTYPE> <html> <head> <title> Pagina de Luis </title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"&g

我正试图将窗体向上移动几个像素，但这不起作用。我不知道为什么

我提交时正在调用该函数（我已经用alert（）对其进行了测试），但css部分不起作用

代码如下：

<!DOCTYPE>    
<html>

<head>
    <title> Pagina de Luis </title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#formulario").submit(function (event) {
                $(this).css({
                    top: -50 px;
                });

            });

        });
    </script>

    <style type="text/css">
        body,
        p {
            font-family: 'Source Sans Pro';
            font-size: 30px;
            line-height: 15px;
            letter-spacing: 0px;
            font-weight: bold;
        }

        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #contenido {
            width: 50%;
            min-width: 300px;
            margin-left: 60px;
            letter-spacing: -1px;
            padding: 20px 0 0px 0;
        }

        #texto {
            padding: 20px;
            margin-top: 30px;
        }

        #texto p {
            margin: 0px;
            padding-bottom: 20px;
        }

        #nombre {
            font-family: 'Special Elite';
            font-size: 30px;
            padding-top: 15px;
            border: 0px;
        }

        #imagen {
            vertical-align: text-top;
            width: 50%;
            float: right;
        }

        input:focus {
            outline: 0 !important;
        }
    </style>

</head>

<body>
    <div id="container">
        <div id="contenido">
            <form method="POST" id="formulario">
                <div id="texto">
                    <p>Hola, soy Luis.</p>
                    <p>Bienvenido a mi web personal.</p>
                    <p>Antes de nada,</p>
                    <p>&iquest;podr&iacute;as indicarme tu nombre?</p>
                    <input type="text" id="nombre" autofocus autocomplete="off" />
                </div>
           </form>
        </div>
    </div>
</body>


帕吉娜·德·路易斯
$（文档）.ready（函数（）{
$（“#formulario”）.提交（功能（事件）{
$（this.css）({
顶部：-50像素；
});
});
});
身体，
p{
字体系列：“源Sans-Pro”；
字体大小：30px；
线高：15px；
字母间距：0px；
字体大小：粗体；
}
#容器{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
#孔蒂多{
宽度：50%；
最小宽度：300px；
左边距：60像素；
字母间距：-1px；
填充：20px0px0；
}
#texto{
填充：20px；
边缘顶部：30px；
}
#texto p{
边际：0px；
垫底：20px；
}
#名义{
字体系列：“特殊精英”；
字体大小：30px；
填充顶部：15px；
边界：0px；
}
#图像{
垂直对齐：文本顶部；
宽度：50%；
浮动：对；
}
输入：焦点{
大纲：0！重要；
}
你好，路易斯
Bienvenido是我的网络个人
安特斯德纳达
&伊克斯特；podrí；你的名字是什么

代码的实时版本：

您使用的css

top

没有任何

位置

属性。尝试使用位置

绝对值

或

相对值

$(document).ready(function () {
            $("#formulario").submit(function (event) {
                $(this).css({
                    top: '-50px',
                    position: 'relative'
                });
            });
        });

如果不希望更改

位置

属性，可以修改

页边距顶部

属性，如

$(document).ready(function () {
                $("#formulario").submit(function (event) {
                    $(this).css({
                        marginTop: '-50px'
                    });
                });
            });

最后，请注意，当表单提交时，页面将重新加载，因此您很可能只会临时看到此更改。如果

返回false

，页面将不会重新加载（尽管这可能不是您想要的）