0

インタラクティブな本を書いており、CSS ターゲットの疑似セレクターを使用してイベントを発生させたいと考えています。ただし、リンクを複数回クリックできるようにしたいと思います。現時点では、1 つは Parrot へ、もう 1 つは Leopard への 2 つのリンクを持っている場合、1 つのリンクをクリックしてから別のリンクをクリックしてイベントを発生させるというアクションを交互に行うことができます。私が必要としているのは、オウムを 2 回、3 回など続けてクリックできるようにすることです。

これは 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 羽以上にしたい場合は、例 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 に答える