배경색을 변경할 요소를 지정하는 방법 jquery

Question

슬라이드 쇼가있는 간단한 웹 사이트를 만들었습니다.

사진 슬라이드가 자동으로 표시되며 페이지 오른쪽에는 6 개의 버튼이있는 메뉴가 있습니다. 내가 "단추 1", "단추 2"에 대한 사진, 때 "단추 2"를 클릭 나타납니다 "단추 1"에 대한 그림을 누르면 등이 나타납니다 내가 원하는 무엇

:

내 슬라이드 쇼 하나를 변경하면 6 개의 단추 중에서 배경색이 변경되면 표시되는 그림이 해당 단추와 관련이 있음을 나타냅니다.

예 : 이것에 대한

Slideshow: 
picture1 appears -----> button1 gets background color changed 
picture2 appears -----> button2 gets background changed 
etc. 

내 코드 :

$(".showcase-thumbnail-content").removeClass("active, passive"); 
$(".showcase-thumbnail-content").addClass("active"); 

이것은 모든 버튼들은 색상이 번에 하나를하지 변경할 수 문제와 함께 작동합니다.

모든 버튼이 나는 각 버튼에 대해 별도의 div하지만 내 주요 질문을 만드는 방법에 대해 생각 클래스 showcase-thumbnail-content 와 div에있는 것은 :

전용 "을 button1"는 배경 색상을 얻을 수 있도록 그것을 어떻게해야합니까 슬라이드 쇼에 "picture1"이 표시되면 변경됩니까 ??

더 많은 정보가 필요하면 최대한 물어보십시오.

편집 :

내가 exaactly하지는 any1은 시간을 여기에 보일 것이다, 그래서 만약 부품이 여기에 가장 관련성이 어떻게 될지 알고있는 페이지에 코드를 많이가 있기 때문에 :

http://showcase.awkwardgroup.com/index2.html

제가 직접 수정 한 데모 2로 작업 중입니다.

다음과 같이 변경

이 완료되었습니다

CSS :

.showcase-thumbnail-content { 
    /* padding: 10px; 
    text-align: center; 
    padding-top: 25px; */ 

    background: #ededed; 
    padding: 5px 15px; 
    border: 1px solid #dcdcdc; 
    border-radius: 6px; 
    color: #777; 
    text-decoration: none; 
    font: bold 0.8em arial, sans-serif; 
    width: 120px; 
    font-size: 130%; 
    cursor: hand; 
    cursor: pointer; 
} 
      } 
.showcase-thumbnail-content:hover { 
    color:#F77B0F!Important; 
} 

.active { 
    background: red; 
} 

HTML 변경 :

쇼케이스 슬라이드 :

<div class="showcase-slide"> 
      <!-- Put the slide content in a div with the class .showcase-content. --> 
      <div class="showcase-content"> 
       <img src="images/01.jpg" alt="01" /> 
      </div> 
      <!-- Put the thumbnail content in a div with the class .showcase-thumbnail --> 
      <div class="showcase-thumbnail"> 
       <!-- <img src="images/01.jpg" alt="01" width="140px" /> --> 
       <!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. --> 
       <p class="showcase-thumbnail-content">First</p> 
       <!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. --> 
       <!-- <div class="showcase-thumbnail-cover"></div> --> 
      </div> 
      <!-- Put the caption content in a div with the class .showcase-caption --> 
      <div class="showcase-caption"> 
       <h2>Be creative. Get Noticed!</h2> 
      </div> 
     </div> 

// 6 개의 모든 요소 (정확히 동일 함)에 대해 수행됩니다.

스크립트 코드는 위에서 설명한 수정 사항을 사용하여 demo2와 동일합니다.

자세한 정보가 필요하면 그냥 물어보십시오.

Answer 1

.

데모에서 일부 코드를 놓친 것 같습니다.

if (options.thumbnails) 
        { 
         i = 0; 
         showcase.find('.showcase-thumbnail').each(function() 
         { 
          var object = jQuery(this); 
          object.removeClass('active'); 
          if (i === current_id) { object.addClass('active'); } 
          i++; 
         }); 
        } 

그리고 CSS에서 내가했다 :

다음 스크립트는 있었다이 미래에 다른 사람을 도움이 될 것입니다

showcase-thumbnail.active p 
     { 
      color: blue; 

     } 

희망!

Answer 2

예 : fiddle.JQuery와 스크립트의 예는 다음과 같다 :이 해결 친구의 도움으로

$(".button").click(function() { 
    if ($(this).hasClass('active')==true) 
    { 
    $(this).removeClass("active"); 
    $(this).addClass("passive"); 
    } 
    else 
    { 
    $(this).addClass("active"); 
    $(this).removeClass("passive"); 
    } 
});​