스크립트 포커스온 효과 채택완료
아리용
9년 전
조회 4,113
아래 스크립트에
li 포커스 효과를 주고싶은데 어떻게 변경하면 좋을까요 ㅠㅠㅠ 포커스 효과 주는것 까지는 했었는데 다른 li를 클릭해도 그전에 클릭했던 li의 액티브 효과가 그대로 남아있더라구요 ㅠㅠㅠ
도와주세요!!
$(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개
채택된 답변
+20 포인트
답변에 대한 댓글 2개
�
아리용
9년 전
네 그렇군요 페이지는 공개하기 어렵고...^^;; 위에 해당 구조소스 올렸습니다!
�
왕계란
9년 전
[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라는 스타일을 제거해 주고 클릭한 애만 다시 입혀 주고...
댓글을 작성하려면 로그인이 필요합니다.
9년 전
셀렉터부분 스크립트 처음에 같은 동일한 적용된 클래스를 removeClass 해주시면 됩니다.
예를들어 .abc 클래스에 적용이 되었을때..
$(".abc").click(function() {
$(".abc").removeClass(".active");
.
.
.
});
이런식으로 공통되는 셀렉터들에게 리셋작업을 해주고
$(this) 클릭한 클래스에대한 작업을 진행하면 되겠죠.
위에 스크립트처럼 src 경로가 따로 저장되야 한다면..
attr 로 백업을 해줘도 좋은 방법입니다.
$(this).attr("data-back",$(this).attr("src"));
뭐 이렇게요. 그러면 계속 불러쓸수있겠죠..
윗분 말처럼 풀소스를 올려주시면 편할텐데..
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
9년 전
해당 HTML구조 입니다!
</p><p> </p><p> </p><p> </p><p><div id="gallery1" class="photo-gallery"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="current-photo joy_border_l"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><img></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="photo-list"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li data-src="../images/item_read_img_ex.png"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="thumbnail"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><img src="../images/item_read_img_ex.png" title="" alt="" /></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li data-src="<a href="<a href="https://unsplash.it/600/400?image=382" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=382</a>"><a href="https://unsplash.it/600/400?image=382" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=382</a></a>"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="thumbnail"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><img src="<a href="<a href="https://unsplash.it/600/400?image=382" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=382</a>"><a href="https://unsplash.it/600/400?image=382" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=382</a></a>" title="" alt="" /></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li data-src="<a href="<a href="https://unsplash.it/600/400?image=373" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=373</a>"><a href="https://unsplash.it/600/400?image=373" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=373</a></a>"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="thumbnail"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><img src="<a href="<a href="https://unsplash.it/600/400?image=373" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=373</a>"><a href="https://unsplash.it/600/400?image=373" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=373</a></a>" title="" alt="" /></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li data-src="<a href="<a href="https://unsplash.it/600/400?image=380" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=380</a>"><a href="https://unsplash.it/600/400?image=380" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=380</a></a>"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="thumbnail"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><img src="<a href="<a href="https://unsplash.it/600/400?image=380" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=380</a>"><a href="https://unsplash.it/600/400?image=380" target="_blank" rel="noopener noreferrer">https://unsplash.it/600/400?image=380</a></a>" title="" alt="" /></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span style="font-size: 11pt;"> </span> </p><p> </p><div>
</div><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인