CSS 초보자가 공부하다가 지쳐서
본문
비슷한 예제를 못찾아 질문드립니다.
버튼이 3개가 있습니다.
1번 버튼위에 마우스 오버시 1번 레이어를 보여줍니다.
2번 버튼위에 마우스 어버시 1번은 숨기고 2번레이어를 보여줍니다.
어느 버튼에 마우스를 올리든 이전 레이어 숨기고 보여줘야겠지요.
투명 레이어라 그냥 띄우면 겹칠테니까요?
즉 번갈아 가면서 이전 레이어 숨기고 해당 버튼에 지정된 레이어를 보여주려고 하는데요.
찾아보니 제이쿼리로 버튼의 index를 구해서 하면 가능할것 같네요.
에고~ 머리가 나쁘면 손발이 고생한다더니 딱 맞는 말이네요.
즐거운 하루되세요.
답변 3
아직 index 개념을 이해못하신것 같으니
제이쿼리를 활용하여 아주 단순하게 짜드렸습니다.
<style type="text/css">
.view2 { display: none; }
</style>
<div class="allview view1" style="width:100px; height:100px; background: #fff100;"></div>
<div class="allview view2" style="width:100px; height:100px; background: #cc0000;"></div>
<button class="btn btn-red" onmouseover="$('.allview').css('display','none'); $('.view1').css('display','block');">1번 버튼</button>
<button class="btn btn-yellow" onmouseover="$('.allview').css('display','none'); $('.view2').css('display','block');">2번 버튼</button>
기본 원리는
버튼 오버시 해당 클래스를 숨기고 내가 원하는 클래스만 보여지기 입니다.
원래는 index 값으로 불필요한 코드를 막는게 정론이나
위 처럼 하셔도 무방합니다.
소스가 눈에보이기 때문에 여러 방도로 활용하시면되겠습니다^^
헉...클레스명을 이용하는 방법을 왜 생각하지 못했을까요?
이게 제이쿼리를 완전하게 이해하지 못한 결과라고 봐야겠죠?
너무 감사합니다. 행복한 하루되세요.
w3cschool에서 기본이론으로 접근하시면 훨씬 수월하실겁니다.
저도 초보라.
조언감사합니다. 즐거운 하루되세요.
흠.....각 div 영역에 id 혹은 class 부여한후
jquery 로 $("아이디 혹은 클리스 ").show(); $("아이디 혹은 클리스 ").hide(); 이벤트를 적절히 사용하시거나
aaa{
display : none ;
}
bbb{
display : block ;
}
이런식으로만든 class 를 $("아이디 혹은 클리스 ").addClass('aaa'); $("아이디 혹은 클리스 ").removeClass('aaa'); 이런식으로 적절히 붙이거나 빼는 동작을 반복하는 방법이 있습니다
두번째 방법은 hasClass() 로 가지고있는지 분기해서 처리가능할거같고요.
어느게 더 효율적일지는 코드 상태에 따라 다를거같네요.
답변 감사합니다. 참고하여 제이쿼리 공부 열심히 하겠습니다.
즐거운 하루되세요.