테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

스크립트 li포커스온 효과 채택완료

아리용 9년 전 조회 4,982
답변 1
목록

조금전에 글을 올렸었는데 작성한 글에 오해의 소지가 있는 듯 하여 다시올립니다 ^^;; 답변주신 분들께는 죄송합니다 ㅠㅠ 

 

아래 소스에 

li포커스 효과를 주고싶은데 어떻게 변경하면 좋을까요 

 

해당소스의 원본 링크 같이 첨부해드립니다!

 

스크립트 입니다.

</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;">$(function() {</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"> </p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"> </p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"><span class="Apple-tab-span" style="white-space:pre">	</span>$('.photo-gallery ul li').click(function() {</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"><span class="Apple-tab-span" style="white-space:pre">		</span>var src = $(this).data('src');</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"><span class="Apple-tab-span" style="white-space:pre">		</span>var $gallery = $(this).closest('.photo-gallery');</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"><span class="Apple-tab-span" style="white-space:pre">		</span>$gallery.find('.current-photo img').attr('src', src);</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"> </p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"><span class="Apple-tab-span" style="white-space:pre">	</span>$('.photo-gallery').each(function() {</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"><span class="Apple-tab-span" style="white-space:pre">		</span>$(this).find('li')[0].click();<span class="Apple-tab-span" style="white-space:pre">	</span></p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;"> </p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14px; letter-spacing: -0.009999999776482582px;">});</p><div>


HTML소스입니다.

</div><div><div>
</div><div><div id="gallery1" class="photo-gallery"></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><div class="current-photo joy_border_l"></div><div><span class="Apple-tab-span" style="white-space:pre">			</span><img></div><div><span class="Apple-tab-span" style="white-space:pre">		</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><div class="photo-list"></div><div><span class="Apple-tab-span" style="white-space:pre">			</span><ul></div><div><span class="Apple-tab-span" style="white-space:pre">				</span><li data-src="../images/item_read_img_ex.png"></div><div><span class="Apple-tab-span" style="white-space:pre">					</span><div class="thumbnail"></div><div><span class="Apple-tab-span" style="white-space:pre">						</span><img src="../images/item_read_img_ex.png" title="" alt="" /></div><div><span class="Apple-tab-span" style="white-space:pre">					</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">				</span></li></div><div><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>"></div><div><span class="Apple-tab-span" style="white-space:pre">					</span><div class="thumbnail"></div><div><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="" /></div><div><span class="Apple-tab-span" style="white-space:pre">					</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">				</span></li></div><div><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>"></div><div><span class="Apple-tab-span" style="white-space:pre">					</span><div class="thumbnail"></div><div><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="" /></div><div><span class="Apple-tab-span" style="white-space:pre">					</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">				</span></li></div><div><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>"></div><div><span class="Apple-tab-span" style="white-space:pre">					</span><div class="thumbnail"></div><div><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="" /></div><div><span class="Apple-tab-span" style="white-space:pre">					</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">				</span></li></div><div><span class="Apple-tab-span" style="white-space:pre">			</span></ul></div><div><span class="Apple-tab-span" style="white-space:pre">		</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">	</span></div></div><div>
</div></div><div>
#javascript
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
쟁 

</p><p><style type="text/css">
.active {
   border:2px solid red;
}
</style></p><p><script type="text/javascript">
$(function() {
   $("div.photo-list ul li").on("click", function() {
      $("li").removeClass("active");
      $(this).addClass("active");
   });
});
</script></p><p>
 

포인트를 두 번이나...감사합니다. 허허허 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
아리용
9년 전
감사합니당 ㅠ 덕분에 해결했습니다!! ㅎㅎ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인