javascript menu 클릭시 전환
조회수 1170회
메뉴를 클릭하면 해당 부분으로 바뀌는 script 를 작성 했는데 문제점이 처음 화면을 켰을 때 다른 부분이랑 다 겹칩니다. 누르면 괜찮은데 처음 시작 부분을 고정 해놓을 수 있나요?
이런식으로 겹칩니다.
이런식으로 고정해놓는 방법이 있을까요?ㅠㅠ
<script>
$(function () {
$('.banner li a').click(function (e) {
e.preventDefault();
var a = $(this).attr('href');
$('.content').stop().fadeIn();
$('.content div').stop().fadeOut();
$(a).stop().fadeIn();
});
});
</script>
<ul class="menu">
<li><a href="#con1">후보자</a></li>
<li><a href="#con2">투표소</a></li>
<li><a href="#con3">투⊙개표</a></li>
<li><a href="#con4">당선인</a></li>
</ul>
검색해서 찾아보려고 했는데 뭐라고 검색해야할지 감이 안잡혀서 질문합니다 죄송합니다
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
구현하고 계시는 것은 tab 내비게이션이라고 부르는 것입니다. 워낙 많이 쓰이는 것이라서 질문자님처럼 날코딩을 해도 되고 웬만한 프론트엔드 프레임워크가 제공하는 UI를 갖다 써도 됩니다. (개인적으로는 검증된 프레임워크들을 사용하시기를 추천합니다.)
올려주신 코드 가지고 데모를 짜보자면 대략 이렇게 될 것입니다. 참고가 되면 좋겠네요.
.content { position: relative; max-width: 1200px; margin: 2em auto 0; } .content div { position: absolute; top: 0; display: none; /* 애초에 뭐가 하나도 안 보이는 것이 기본값 */ } .content div#con0 { display: block; /* 맨 처음 보여줘야 할 놈은 보여주기 */ }$(".menu li a").each(function() { $(this).click(function(e) { e.preventDefault(); // fadeIn() 과 fadeOut() 은 결국 opacity와 display 스타일속성을 고치는 것이므로 $(".content div").fadeOut(); // CSS에서 최초 지정한 스타일링은 스크립트에 의해 언제든지 무시되고 var a = $(e.target).attr("href"); // 지정한 객체에 동적으로 인라인 스타일링을 먹이게 됩니다. $(".content " + a).fadeIn(); }); });
댓글 입력