CSS 타겟 클릭 복수

Question

대화 형 서적을 쓰고 있으며 CSS 대상 의사 선택기를 사용하여 이벤트를 발생시키고 싶습니다. 그러나 링크를 여러 번 클릭하도록 허용하고 싶습니다. 내가 앵무새와 표범에게 두 개의 링크가있는 순간, 한 링크를 클릭 한 다음 다른 링크를 클릭하여 이벤트를 실행시킬 수 있습니다. 내가 필요한 것은 앵무새를 두 번, 세 번 등을 연속으로 클릭 할 수 있어야한다는 것입니다.

이

이는 CSS

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

이 Thnk에게 있습니다

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

HTML 태그 당신

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

자바 스크립트

즉 내가 예를 가지고있는 경우입니다 경우 단지 두 개의 서로 다른 앵무새 간을 전환하는 것 같습니다

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

. 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

예 1 참조

예제 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 
      } 
    }); 
});​