하나의 링크가 선택 될 때 하나, 다른 링크가 선택 될 때 다른 하나가 페이드 인되도록 만들려고합니까?

Question

맞습니다. 4 개의 div가 있습니다. 링크를 클릭하면 1과 3이 페이드되고, 다른 버튼을 클릭하면 2와 4가 페이드 인합니다. 나는 JQuery를 사용하고있다.

<div id="video selector" style="float: right; width: 250px; background-color:#f3f3f3; height: 210px; margin-bottom:13px;"> 
<a href="#"> 
    <script> 
    $(document.body).click(function() { 
     $("#1").fadeIn("slow"); 
     $("#3").fadeIn("slow"); 
     $("#2").hide(); 
     $("#4").hide(); 
     }); 
    </script> 
    <img src="img/electronic recycling play.png" style="width:220px; padding-left:15px; padding-top:12px; padding-bottom:9px; cursor:pointer;" /> 
    </a> 
    <center>Electronic Recycling</font></center> 
    </div> 

이 하나가로드 div의 1과 3

<div id="video selector2" style="float: right; width: 250px; background-color:#f3f3f3; height: 210px;"> 
<a href="#"> 
    <script> 
     $(document.body).click(function() { 
      $("#2").fadeIn("slow"); 
      $("#4").fadeIn("slow"); 
      $("#1").hide(); 
      $("#3").hide(); 
     }); 
    </script> 
    <img src="img/battery recycling play.png" style="width:220px; padding-left:15px; padding-top:12px; padding-bottom:9px; cursor:pointer;" /> 
    </a><center>Battery Recycling</font></center> 
    </div> 

을이 하나의 문제는 둘이다 div의 2와 4

를로드 할 수 있습니다 : 여기에 지금까지있어 무엇 동일한 divs (2와 4)를로드하고 비디오가 전환되지 않고 그냥 같은 것을 다시로드합니다.

Answer 1

이처럼 태그에 ID를 추가

이

<script> 
$(document).ready(function() { 
    $("#firstlink").click(function(){ 
    $("#1").fadeIn("slow"); 
    $("#3").fadeIn("slow"); 
    $("#2").hide(); 
    $("#4").hide(); 
    }); 
    }); 
</script> 

위의 코드는 머리에 갈 수

<a href="#" id="firstlink"> ... </a> 

그런 다음 문서 준비 기능이 같이 클릭 이벤트 처리기를 추가 태그의 콘텐츠가 아닌 페이지의 id가 firstlink 인 태그를 클릭하면 해당 함수가 실행되도록 이벤트 핸들러가 추가됩니다. 유사한 기능이 다음 링크에 대해 수행 될 수 있습니다.