탭메뉴 질문드립니다. 채택완료

위와 같이 탭메뉴를 만들려고 합니다.
메뉴를 눌렀을때 메뉴 효과는 만들었는데
메뉴를 눌렀을때 아래 슬라이드가 보이게 하는 방법을 노가다 말고는
방법을 모르겠어서 질문드립니다.
- 탭1
- ·
- 탭2
- ·
- 탭3
.main_tab { width: 100%; } .main_tab li { display: inline-block; margin: 45px 15px 0 0; opacity: 0.7;} .main_tab li:nth-child(odd) { cursor: pointer;} .main_tab li:nth-child(odd):hover { border-bottom: 1px solid #fff; padding-bottom: 5px; opacity: 1;} .main_tab li:nth-child(1) { border-bottom: 1px solid #fff; padding-bottom: 5px; opacity: 1;}
.main_tab_slide>div { display: none; } .main_tab_slide .tab1 { display: block; }
$(document).ready(function(){ $('.main_tab .tab_btn').click(function(){ $(this).css({'opacity':'1', 'border-bottom':'1px solid #fff', 'padding-bottom':'5px'}); $(this).siblings('.tab_btn').css({'opacity':'0.7', 'border-bottom':'none'}); }) })
스크립트는 위와 같습니다.
tab_btn을 눌렀을때 tab_btn의 css가 각각 바뀌는건 했는데,
tab_btn이 바뀌면서 main_tab_slide의 div가 각각 나타나게 하려면
어떻게 해야 할까요?
tab_btn와 main_tab_slide의 번호가 같을때
tab_btn을 클릭하면 같은 번호의 main_tab_slide가 나타나라! 라는 if문을 줘야하는걸까요?
if문을 줘야하면 어떻게 줘야하는걸까요?
어디서 들은건 있는데 해본적이 없어서 감이 안잡힙니다.. ㅠㅠ
답변 1개
지금 · 이걸 li 태그로 주셨는데.. 이건 그냥 css로 처리하시구요
- 탭1
- 탭2
- 탭3
.main_tab { width: 100%; } .main_tab li { display: inline-block; margin: 45px 15px 0 0; opacity: 0.7;} .main_tab li:nth-child(odd) { cursor: pointer;} .main_tab li:nth-child(odd):hover { border-bottom: 1px solid #fff; padding-bottom: 5px; opacity: 1;} .main_tab li:nth-child(1) { border-bottom: 1px solid #fff; padding-bottom: 5px; opacity: 1;}
.main_tab_slide>div { display: none; } .main_tab_slide .tab1 { display: block; }
$(document).ready(function(){ $('.main_tab .tab_btn').click(function(){ var index = $(this).index(); //현재 클릭된 요소의 순서값 $(this).css({'opacity':'1', 'border-bottom':'1px solid #fff', 'padding-bottom':'5px'}); $(this).siblings('.tab_btn').css({'opacity':'0.7', 'border-bottom':'none'});
$(".main_tab_slide").children("div").css('display', 'none'); //모든 슬라이드 안보이게함 $(".main_tab_slide").children("div").eq(index).css('display','block'); //클릭된 탭의 순서값에 위치한 슬라이드를 보여줌 }) })
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인