아래 스크립트에
li 포커스 효과를 주고싶은데 어떻게 변경하면 좋을까요 ㅠㅠㅠ 포커스 효과 주는것 까지는 했었는데 다른 li를 클릭해도 그전에 클릭했던 li의 액티브 효과가 그대로 남아있더라구요 ㅠㅠㅠ
도와주세요!!
Copy
$(function() {
$('.photo-gallery ul li').click(function() {
var src = $(this).data('src');
var $gallery = $(this).closest('.photo-gallery');
$gallery.find('.current-photo img').attr('src', src);
});
$('.photo-gallery').each(function() {
$(this).find('li')[0].click();
});
});답변 3개 / 댓글 2개
채택된 답변
+20 포인트
2016-01-14 (목) 10:40:57
html 구조도 같이 올려 주시는 게 나을 듯하네요.
ul부터 li까지요.
실행되는 페이지를 보여 주시는 게 제일 좋습니다.
답변에 대한 댓글 2개
2016-01-14 (목) 11:24:02
[code]
<style type="text/css">
.active {
border:2px solid red;
}
</style>
<script type="text/javascript">
$(function() {
$("div.photo-list ul li").on("click", function() {
$("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
[/code]
쉽게 생각하시면 될 것 같습니다.
클릭 이벤트가 일어날 때마다 li에 있는 active라는 스타일을 제거해 주고 클릭한 애만 다시 입혀 주고...
<style type="text/css">
.active {
border:2px solid red;
}
</style>
<script type="text/javascript">
$(function() {
$("div.photo-list ul li").on("click", function() {
$("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
[/code]
쉽게 생각하시면 될 것 같습니다.
클릭 이벤트가 일어날 때마다 li에 있는 active라는 스타일을 제거해 주고 클릭한 애만 다시 입혀 주고...
2016-01-14 (목) 10:50:10
셀렉터부분 스크립트 처음에 같은 동일한 적용된 클래스를 removeClass 해주시면 됩니다.
예를들어 .abc 클래스에 적용이 되었을때..
$(".abc").click(function() {
$(".abc").removeClass(".active");
.
.
.
});
이런식으로 공통되는 셀렉터들에게 리셋작업을 해주고
$(this) 클릭한 클래스에대한 작업을 진행하면 되겠죠.
위에 스크립트처럼 src 경로가 따로 저장되야 한다면..
attr 로 백업을 해줘도 좋은 방법입니다.
$(this).attr("data-back",$(this).attr("src"));
뭐 이렇게요. 그러면 계속 불러쓸수있겠죠..
윗분 말처럼 풀소스를 올려주시면 편할텐데..
2016-01-14 (목) 10:44:43
해당 HTML구조 입니다!
Copy
<div id="gallery1" class="photo-gallery"> <div class="current-photo joy_border_l"> <img> </div> <div class="photo-list"> <ul> <li data-src="../images/item_read_img_ex.png"> <div class="thumbnail"> <img src="../images/item_read_img_ex.png" title="" alt="" /> </div> </li> <li data-src="https://unsplash.it/600/400?image=382"> <div class="thumbnail"> <img src="https://unsplash.it/600/400?image=382" title="" alt="" /> </div> </li> <li data-src="https://unsplash.it/600/400?image=373"> <div class="thumbnail"> <img src="https://unsplash.it/600/400?image=373" title="" alt="" /> </div> </li> <li data-src="https://unsplash.it/600/400?image=380"> <div class="thumbnail"> <img src="https://unsplash.it/600/400?image=380" title="" alt="" /> </div> </li> </ul> </div> </div>답변을 작성하려면 로그인이 필요합니다.