스크립트 포커스온 효과
본문
아래 스크립트에
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
html 구조도 같이 올려 주시는 게 나을 듯하네요.
ul부터 li까지요.
실행되는 페이지를 보여 주시는 게 제일 좋습니다.
네 그렇군요 페이지는 공개하기 어렵고...^^;; 위에 해당 구조소스 올렸습니다!
<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>
쉽게 생각하시면 될 것 같습니다.
클릭 이벤트가 일어날 때마다 li에 있는 active라는 스타일을 제거해 주고 클릭한 애만 다시 입혀 주고...
셀렉터부분 스크립트 처음에 같은 동일한 적용된 클래스를 removeClass 해주시면 됩니다.
예를들어 .abc 클래스에 적용이 되었을때..
$(".abc").click(function() {
$(".abc").removeClass(".active");
.
.
.
});
이런식으로 공통되는 셀렉터들에게 리셋작업을 해주고
$(this) 클릭한 클래스에대한 작업을 진행하면 되겠죠.
위에 스크립트처럼 src 경로가 따로 저장되야 한다면..
attr 로 백업을 해줘도 좋은 방법입니다.
$(this).attr("data-back",$(this).attr("src"));
뭐 이렇게요. 그러면 계속 불러쓸수있겠죠..
윗분 말처럼 풀소스를 올려주시면 편할텐데..
해당 HTML구조 입니다!
<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>
답변을 작성하시기 전에 로그인 해주세요.