스크립트 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();
});
});
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>
답변 1
<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>
포인트를 두 번이나...감사합니다. 허허허
감사합니당 ㅠ 덕분에 해결했습니다!! ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.