조금전에 글을 올렸었는데 작성한 글에 오해의 소지가 있는 듯 하여 다시올립니다 ^^;; 답변주신 분들께는 죄송합니다 ㅠㅠ
아래 소스에
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(); }); });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>답변 1개 / 댓글 1개
채택된 답변
+20 포인트
2016-01-14 (목) 11:26:19
Copy
<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>포인트를 두 번이나...감사합니다. 허허허
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.