html - CSS 目标点击多次

Question

我正在写一本交互式书籍，希望使用 CSS 目标伪选择器触发事件​​。但是我想允许多次点击链接。目前，如果我有两个链接，一个指向 Parrot，一个指向 Leopard，我可以交替操作，点击一个链接，然后点击另一个链接来触发事件。我需要的是能够连续点击 Parrot 两次、三次等。

这是 HTML 标记

<span id="line1"><a href="#parrot">Litte Parrot</a></span>
<span id="line2"><a href="#leopard">Leopard</a></span>

这是CSS

.parrot:target { -webkit-animation: do_something 1s;}
.leopard:target { -webkit-animation: do_something_else 1s;}

谢谢你

编辑

一直在忙于替换 div，因此目标对象和触发它的链接都发生了变化。虽然它确实有效，但似乎是一个非常困惑的解决方案。此实例中的链接和目标是同一个对象(一只鹦鹉的图像)。谁能提出更好的解决方案？

HTML 标记

<!-- touch activated animation -->
    <a href="#parrot2"><div id="parrot1" class="parrot" onclick="replace1()">
        <div class="left_eye"></div>
        <div class="right_eye"></div>
    </div></a>
    <!-- /touch activated animation -->
    <!-- touch activated animation -->
    <a href="#parrot1"><div id="parrot2" class="parrot" style="display: none" onclick="replace2()">
        <div class="left_eye"></div>
        <div class="right_eye"></div>
    </div></a>
    <!-- /touch activated animation -->

CSS

.parrot:target { -webkit-animation: do_something 1s;}

JavaScript

function replace1() {
document.getElementById("parrot1").style.display="none";
document.getElementById("parrot2").style.display="block";
}
function replace2() {
document.getElementById("parrot2").style.display="none";
document.getElementById("parrot1").style.display="block";
}

Answer 1

看起来你只是在两只不同的鹦鹉之间切换，如果是这样的话我有一个例子。如果您想要多于 2 只鹦鹉，请参见示例 2。

示例 1:http://jsfiddle.net/yW6T3/1/

示例 1 解释(带注释):

$(document).ready(function() {//when the document is loaded/ready
    $("#parrotlink").click(function() {//on parrotlink click
        $("#parrot1").toggle();//toggle parrot1 on if off, off if on
        $("#parrot2").toggle();//toggle parrot2 on if off, off if on
    });
});​

示例 2:http://jsfiddle.net/yW6T3/2/

示例 2 解释(带注释):

$(document).ready(function() {//when the document is loaded/ready
    $("#parrotlink").click(function() {//On parrotlink clicked do function
          if($(".parrot.active").next(".parrot").length==0)//if there is nothing for a next element/parrot
          {
          $(".parrot.active").removeClass("active");//remove active class from active
          $(".parrot:first-child").addClass("active");//make first parrot active
          }
          else//if there is a next element/parrot in line
          {
          $(".parrot.active").removeClass("active").next(".parrot").addClass("active");//remove active class from active and make next parrot active
          }
    });
});​