点击按钮后，如何让它改变位置？

Question

我如何让一个按钮在被点击后改变位置，就像这个演示一样，但是我不想用active参数，而是希望在单击后将其放置在margin-left:50px;的位置。

HTML

<div class="button">
    <button type="fb-like">Fb-Like</button>
</div>

CSS

.button:active {
    margin-left:50px;
}
/* But with a on clicked parameter instead of active */

- Chun

---

添加了 JavaScript 标签；CSS 不支持 onClick 功能。虽然有像 :target hack 这样的东西可以实现这一点，但它们不可靠 / 语义化。 - TylerH

然而，似乎未来会在HTML中添加类似的功能。链接 - TylerH

Answer 1

这是一个简单的解决方案： http://jsfiddle.net/LJHQW/2/ JavaScript:

/* Toggles the style class on click */

$("button").click(function() {
    $(".button").toggleClass("buttonLeft");
});

CSS：

.buttonLeft {margin-left:50px;} /* But with a on clicked parameter instead of active */

- Kirill Chatrov

---

这不会明确移动按钮，如果用户再次点击，它将回到原始位置。 - web-tiki

这不完全是JavaScript，它是jQuery，并且问题中没有jQuery标签... - T J

@TilwinJoy 说实话，一开始也没有 JavaScript 标签。所以这可能是 OP 不知道他需要什么，但愿意考虑多个选项的情况。 - TylerH

jQuery是一个JavaScript库。因此，它是使用jQuery的基于JavaScript的解决方案。这里有一个可以无限更改的fiddle：http://jsfiddle.net/LJHQW/4/。 - Kirill Chatrov

Answer 2

您需要使用JavaScript：

var d = document.getElementById("button");
d.addEventListener('click',function(){
    d.className = d.className + " move";
});

示例： http://jsfiddle.net/LJHQW/3/

或者，如果你已经在使用jQuery：

$('.button').click(function(){
    $(this).addClass('move');
});

Demo: http://jsfiddle.net/LJHQW/1/

- Mooseman

---

我在这里做错了什么，@Mooseman？jsfiddle.net/qUjDa 如果我只点击按钮的右侧或下方，它才会移动。 - Chun

@Chun 事件不会从 iframe 内部冒泡。 点击右侧或下方是在 iframe 外部且 .button 内部，这就是为什么它能正常工作的原因。 - Mooseman

那我该怎么做呢？我已经尝试了几个小时，但我不知道如何让一个fb按钮实现这个功能：\ - Chun

@Chun 使用此答案中展示的Facebook API。 - Mooseman