CSS target click multiple

Question

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

这是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;} 

Thnk你

编辑

已与更换的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 
      } 
    }); 
});​