javascript - 单击时修改 CSS 元素

Question

我正在处理以下页面： http: //mockingbirdagency.com/thebox/bettercss/login-1.html 我对 Javascript 知之甚少，所以请帮我把它搞砸。

我希望“使用您的电子邮件地址注册”以块为中心并在单击时位于块的顶部（通过删除 margin-top: 30px;）（想法是不要有这么大的块）。

如何将其添加到 JS 函数中？

谢谢！

Answer 1

您可能希望为此使用 jquery 作为基本指南：

$("#target").click(function() {
  alert("Handler for .click() called.");
});

因此，当您单击 ID 为 target 的项目时，会显示一个警告框：“调用了 .click() 的处理程序”。

所以现在你想为你点击的那个项目添加一个样式

$("#target").click(function() {
      $(this).css("margin-top","0");
    });

所以，现在你点击了该项目，它运行并添加了 margin-top:0 的 CSS；到“this”，这是触发事件的项目。

显然，您需要将#target 更改为您希望触发事件的项目的ID，您也可以使用 .target 并将其应用于只有一个类的项目。

在http://jquery.com了解更多信息

Answer 2

在您的 jquery 点击处理程序中

$(document).ready(function() {
    $('h1').click(function() {
        $('#details').toggle(500);
    });
});

你需要添加

$(this).css("margin-top","");

最终代码：

$(document).ready(function() {
    $('h1').click(function() {
        $(this).css("margin-top","");
        $('#details').toggle(500);
    });
});

Answer 3

试试这个：

$("#hh").click(function(){
    $(this).css("margin-top","0px");
});