0

我正在写一本交互式书籍，并希望使用 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";
}
4

1 回答 1

0

看起来你只是在两只不同的鹦鹉之间切换，如果是这样的话，我有一个例子。如果您希望它超过 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
          }
    });
});​
于 2012-07-23T16:02:56.563 回答