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
          }
    });
});

CSS目标点击多个

1 个答案: