답변 1개
채택된 답변
+20 포인트
11년 전
</p>
<p><html>
<style>
.numberBox {
list-style: none;
text-align: center;
}
.numberBox > LI {
display: inline;
padding: 5px;
border: 1px solid #dadada;
}
.numberBox > LI.selected {
font-weight: bold;
}
.imageBox > IMG {
border: 0px;
display: none;
}
</style>
<script src="<a href="<a href="http://code.jquery.com/jquery-1.9.1.min.js%22%3E%3C/script" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.9.1.min.js%22%3E%3C/script</a>"><a href="http://code.jquery.com/jquery-1.9.1.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.9.1.min.js</a>"></script</a>>
<script>
$(function () {
$(".numberBox > LI").mouseover(function () { //class="imageBox"의 자식중 LI에 마우스를 올렸을때 실행.
var eq = $(".numberBox > LI").index($(this)), //선택한 번호의 순번
parent = $(this).parent(); //부모 Element
if ($(this).hasClass('selected')) return; //현재 선택된 번호라면 리턴
//부모(ul)의 하위자식(LI)의 class="selected"를 제거하고, 선택한 순번에 class="selected" 를 추가. </p>
<p> parent.children().removeClass('selected').eq(eq).addClass('selected');
//class="imageBox"의 하위자식을 모두 숨기고, 선택한 순번을 보이도록 변경.
$(".imageBox").children().hide().eq(eq).show();
})
})
</script>
<ul class="numberBox">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="imageBox">
<img src="<a href="<a href="http://sstatic.naver.net/search/img3/h1_naver2.png" target="_blank" rel="noopener noreferrer">http://sstatic.naver.net/search/img3/h1_naver2.png</a>"><a href="http://sstatic.naver.net/search/img3/h1_naver2.png" target="_blank" rel="noopener noreferrer">http://sstatic.naver.net/search/img3/h1_naver2.png</a></a>" style="display:inline" />
<img src="<a href="<a href="http://icon.daumcdn.net/w/icon/1406/13/180149217.jpg" target="_blank" rel="noopener noreferrer">http://icon.daumcdn.net/w/icon/1406/13/180149217.jpg</a>"><a href="http://icon.daumcdn.net/w/icon/1406/13/180149217.jpg" target="_blank" rel="noopener noreferrer">http://icon.daumcdn.net/w/icon/1406/13/180149217.jpg</a></a>" />
<img src="<a href="<a href="http://icon.daumcdn.net/w/icon/1406/13/185922776.png" target="_blank" rel="noopener noreferrer">http://icon.daumcdn.net/w/icon/1406/13/185922776.png</a>"><a href="http://icon.daumcdn.net/w/icon/1406/13/185922776.png" target="_blank" rel="noopener noreferrer">http://icon.daumcdn.net/w/icon/1406/13/185922776.png</a></a>" />
</div>
</html></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
새야1204
11년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다~^^