jQuery 이후 이미지 스왑 아코디언 헤더 선택

Question

정보가있는 jquery 아코디언이 있습니다. 제가하려는 것은이 아코디언의 오른쪽으로 이미지를 바꾸는 것입니다. 그리고 이미지는 그들이 선택한 아코디언 선택에 달려 있습니다. 나는 이것을 알아 내기 위해 jQuery를 충분히 경험하지 못했다. 링크가 아래에 있으며 여기에서 설명하는 내용을 볼 수 있습니다. 당신이 그것을 밖으로 체크 아웃하는 경우. 오른쪽 이미지는 아코디언 선택에 따라 다른 이미지로 바꿔야합니다. 어떤 도움이라도 대단히 감사하겠습니다. 사전에

http://luistovar.com/sandbox

감사합니다!

Answer 1

가장 쉬운 방법은 기존의 Accordeon 메뉴 코드에 코드를 추가하는 대신 새로운 코드를 작성하는 것입니다 (물론 기존 코드에 통합하여 사용할 수 있습니다).

4 개의 이미지를 절대 (!) 서로 위에 놓습니다. 그 때문에, 당신은 그들 중 하나만 볼 수 있습니다. 그들에게 예를 들어 .picture와 같은 클래스를 제공하십시오. 각 그림에 ID를 부여하십시오 (예 : # picture1).

모든 태그에 ID를 지정하십시오 (예 : # menu_item1).

다음과 jQuery를 사용하십시오.

$("#menu_item1").click(
    function(){ 
     $(".picture").fadeOut(200, function(){ 
      $("#picture1").fadeIn(); 
     }); 
    }); 

각 항목/그림에 대해 이것을 복사하고 숫자를 조정하십시오. 코드를 줄이는 방법이 있지만이 방법으로 이해하기 쉽습니다.

아직 확인하지 않았지만 도움이되기를 바랍니다. 작은 페이드 효과를 줄 수 있습니다. 200 번을 더 작거나 큰 수 (밀리 초)로 조정하여 미세 조정할 수 있습니다.

행운을 빈다.