Question

I am writing an interactive book and would like events to be fired by using the CSS target Pseudo-selector. However I would like to allow the link to be clicked multiple times. At the moment if I have two links, one to Parrot and one to Leopard, I can alternate the action, clicking on one link, then another to fire the events. What I need is to be able to click on Parrot twice, three times etc. in a row.

This is the HTML markup

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

This is the CSS

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

Thnk you

EDIT

Have been messing around with replacing divs, so the target object changes as well as the link to fire it. Seems like a very messy solution although it does work. The link and target in this instance are the same object (an image of a parrot). Can anyone suggest a better solution?

HTML Markup

<!-- 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

It looks like you are just toggling between two different parrots, if that is the case I have an Example. If you want it to be more then 2 parrots see Example 2.

Example 1 here: http://jsfiddle.net/yW6T3/1/

Example 1 Explanation (with comments):

$(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
    });
});​

Example 2 here: http://jsfiddle.net/yW6T3/2/

Example 2 Explanation (with comments):

$(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
          }
    });
});​