div 및 이미지 포함 켜기/끄기

Question

css, javascript를 사용하여 활성 클래스를 추가/제거하여 강조 표시된 현재 이미지를 강조 표시하려고합니다.

제 솔루션을 jsfiddle에 업로드했습니다. 한번보십시오. 정말로이 문제가 무엇인지 이해하기 위해 열심히 노력하십시오. http://jsfiddle.net/BEmXZ/39/

HTML

<div class="container-thumbs"> 
    <div><a><img src=".jpg" /></a></div> 
    <div><a class="active"><img src=".jpg" /></a></div> 
    <div><a><img src=".jpg" /></a></div> 
</div> 

자바 스크립트

var make_button_active = function() { 
    //Get item siblings 
    var siblings =($(this).siblings()); 
    //Remove active class on all buttons 
    siblings.each(function (index) { 
      $(this).removeClass('active'); 
     } 
    ); 

    //Add the clicked button class 
    $(this).addClass('active'); 
} 

$(document).ready(function() { 
    $(".container-thumbs a").click(make_button_active); 
}); 

CSS

.container-thumbs{ 
    width: 300px; height: 25; font-size: 18px; 
} 
.container-thumbs a{ 
    list-style: none; float: left; margin-right: 4px; padding: 5px; 
} 
.container-thumbs div a:hover, .container-thumbs div a.active { 
    background-color: #f90; 
}​ 

Answer 1

siblings은 앵커가 div로 싸여 있기 때문에 작동하지 않습니다. 시도 :

var make_button_active = function() { 
    $(".container-thumbs a").removeClass("active"); 
    $(this).addClass("active"); 
} 

$(document).ready(function() { 
    $(".container-thumbs a").click(make_button_active); 
});​ 

Demo. (새로운 바이올린, 당신은 당신을 게시하지했기 때문에)

Answer 2

이 코드보십시오 :

클릭에

, 그 다음 모든 이미지에서 활성 클래스를 제거에 적용을 현재 이미지. 또한 make_button_active 기능이 전혀 필요 없다고 생각합니다. 이에 코드를 변경하는 경우

$(document).ready(function() { 
    $(".container-thumbs a").click(function(){ 
     $(".container-thumbs a").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
});​ 

DEMO

Answer 3

그것은이어야 작동합니다

var make_button_active = function() 
{ 
    //Get item siblings 

    var siblings = $(".container-thumbs a");  
    siblings.each(function (index) 
{ 
    $(this).removeClass('active'); 
} 
); 
    $(this).addClass('active'); 
} 

$(document).ready(function() { 
$(".container-thumbs a").click(make_button_active); 

});