선택한 이미지 강조 표시

"hover"와 동일한 이미지를 상자 주위에 강조 표시하려고합니다. 어떤 아이디어? 나는 몇 가지 시도했지만 아무것도 작동하는 것 같습니다. 호버 기능은 완벽하게 작동하지만 클릭하면 커서가 멀리 떨어져 있어도 이미지 주위에 상자가 나타납니다. 아래 코드를 붙여 넣었습니다. 미리 감사드립니다 !!선택한 이미지 강조 표시

<html><head> 

<style type="text/css"> 
.event { 
display: inline-block; 
float: left; 
} 

.swatch { 
width: 57px; 
height: 45px; 
display: inline-block; 
float: left; 
background-repeat: no-repeat; 
padding: 5px; 
background-position: center center; 
margin-top: 8px; 
} 

.swatch:hover { 
border: thin solid #999; 
background-position: center center; 
} 

.selected { 
border: thin solid #999; 
} 

.sq562-white { 
background-image: url(../images/products/women/lifeguard_girlstee_white.jpg); 
} 


.sq562-red { 
background-image: url(../images/products/women/lifeguard_girlstee_red.jpg); 
} 
</style> 

<script type="text/javascript"> 
$(window).load(function(){ 
$(document).ready(function() { 
// hide all the events 
$("#bigCal p").hide(); 

$(".event a").click(function(evt) { 
    evt.preventDefault(); 
    $("#bigCal p").hide(); 
    var id = $(this).attr('id'); 

    $("." + id).show(); 
}); 
}); 
});//]]> 

</script> 

</head> 
<body> 
<li class="event"> 
    <a id="red" href="#" > 
     <div class="swatch sq562-white"></div> 
    </a> 
</li> 

<li class="event"> 
    <a id="blue" href="#"> 
     <div class="swatch sq562-red"></div> 
    </a> 
</li> 
</ul> 


<div id="bigCal"> 
<p style="display: block; margin-top:25px; margin-bottom:-54px;" class="all blue"><a title="Red">Red</a></p> 
<p style="display: none; margin-top:25px; margin-bottom:-54px;" class="all red"><a title="White">White</a></p> 

</div> 


</body></html>

출처

2013-03-06 user2132851

도움이 될 수 있습니다. http://stackoverflow.com/questions/6491962/custom-checkbox/6492222 # 6492222 – kapa

안녕하세요 당신은 또한이 코드를 테스트 할 수 있습니다

$(document).ready(function() { 
// hide all the events 
$("#bigCal p").hide(); 

$(".event a").click(function(evt) { 
    evt.preventDefault(); 
    //remove the previous selected item 
    $(".swatch").removeClass("selected"); 
    //select the current item 
    $(".swatch", this).addClass("selected"); 
    $("#bigCal p").hide(); 
    var id = $(this).attr('id'); 
    $("." + id).show(); 
    }); 
});

을 그리고 샘플 : http://jsfiddle.net/SNUhB/2/

출처

2013-03-06 23:51:04

감사합니다 !! 이 코드는 완벽하게 작동하며, 위 코드에 나와있는 다른 javascript/jQuery 스크립트와 충돌합니다. 그러나 그것은 내가 다루어야 할 별도의 문제입니다. 다시 한 번 감사드립니다! – user2132851

사용 onclick은 (jQuery를 함께, 또한 단지 자바 스크립트와 함께 할 수 있음) .selected 클래스를 추가합니다 :

$(".swatch").click(function() { 
    $(this).addClass("selected"); 
}

출처

2013-03-06 23:40:03

답변 해 주셔서 감사합니다! 작동에 어려움을 겪고 있습니다. 이걸 내 머리 속에 넣었습니다. $ (". swatch") { this.addClass ("selected"); }); 하지만 운이 없습니다. 아마 그게 내가 의도 한 것이 아니었을까요? 미안, 초보자 왔어! – user2132851

@ user2132851 나는 내 대답을 바로 편집했다. jQuery를 사용하고 있기 때문에'this() '대신'$ (this)'를 써야한다. –

클래스를 토글 (onclick 클래스를 추가하고 다음 클릭시 제거)하려면 'addClass'를 toggleClass로 바꿀 수 있습니다. –

선택한 이미지 강조 표시

답변

관련 문제