简单的JavaScript OnClickfunction

我终于开始为我的印刷设计组合创建一个网站。 我确切地知道我正在努力实现的目标，但对网页设计来说还是一个新手，我发现我的知识存在一些局限性….

我已经使用了css3过渡（目前它们只在Chrome和Safari中工作）来制作在hover时触发的翻转卡 – 这些function完美无缺，正是我所期待的。 我现在要做的就是添加一个JavaScript函数（使用jQuery），在点击时永久翻转卡片。 我不希望它禁用hoverfunction，这是纯粹的CSS。

我发现这很难实现。

该网站在这里：

www.samueljamesdesign.com

任何帮助将不胜感激。

Answer 1

只需修改CSS，以便通过添加类来触发旋转。 例如，更改此规则：

#card-container:hover .front { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); } 

对此：

 .card-container:hover .front, .card-container.selected .front,{ -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); } 

请注意，您不能使用#card-container ，因为在文档中具有多个具有相同ID的元素是无效的。 将card-container设置为类。

---

点击后，使用新的CSS，您可以做到：

 var tiles = $('#tiles .card-container'); tiles.click(function() { tiles.removeClass('selected'); $(this).addClass('selected'); //To change the image in maincontent to match the //one in the flipcard clicked on: $('#maincontent .img-wrapper').empty().append($(this).find('img').clone()); });