모바일에서는 css로 만든 탭이 동작 안합니다.

모바일에서는 css로 만든 탭이 동작 안합니다.

QA

모바일에서는 css로 만든 탭이 동작 안합니다.

본문

안녕하세요?
모바일에서 pc버전으로 페이지를 열어보니
탭 네비게이션이 작동하지 않습니다.
왜그럴까요?
라디오 버튼 형식인데 터치까지는 css 적용이 다 되는데 내용이 바뀌지를 않습니다.
마우스 오버시에는 라벨 색이 바뀌고 클릭을 하면 내용이 바뀌는데
마우스 오버 효과를 없애도 소용이 없습니다.

바쁘신 와중에 끝까지 읽어주셔서 대단히 감사합니다.


html

<div id="css_tabs"> 
    <input id="tab1" type="radio" name="tab" checked="checked" /> 
    <input id="tab2" type="radio" name="tab" /> 
    <input id="tab3" type="radio" name="tab" /> 
    <label for="tab1">Tab 1</label> 
    <label for="tab2">Tab 2</label> 
    <label for="tab3">Tab 3</label> 
    <div class="tab1_content">Tab1 내용 
       </div> 
    <div class="tab2_content">Tab2 내용 
        <</div> 
    <div class="tab3_content">Tab3 내용 
        <</div> 
</div> 



css

#css_tabs { 
    font-family:'nanumgothic', '나눔고딕', 'malgun gothic', '맑은 고딕', 'dotum', '돋움', sans-serif 
} 
/* 탭 선택 시 표시할 요소(div) 정의(1번 탭 선택 시 첫 번째 div 요소 표시) */ 
#css_tabs input:nth-of-type(1), #css_tabs input:nth-of-type(1) ~ div:nth-of-type(1), #css_tabs input:nth-of-type(2), #css_tabs input:nth-of-type(2) ~ div:nth-of-type(2), #css_tabs input:nth-of-type(3), #css_tabs input:nth-of-type(3) ~ div:nth-of-type(3) { 
    display:none 
} 
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1), #css_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2), #css_tabs input:nth-of-type(3):checked ~ div:nth-of-type(3) { 
    display:block 
} 
/* 라벨 기본 스타일 지정 */ 
#css_tabs > label { 
    display:inline-block; 
    font-variant:small-caps; 
    font-size:.9em; 
    padding:5px; 
    text-align:center; 
    width:20%; 
    line-height:1.8em; 
    font-weight:700; 
    border-radius:3px 3px 0 0; 
    background:#eee; 
    color:#777; 
    border:1px solid #ccc; 
    border-width:1px 1px 0 
} 
#css_tabs > label:hover { 
    cursor:pointer 
} 
#css_tabs label[for=tab1] { 
    margin-left:1.5em 
} 
/* 선택된 라벨, 커서를 올린 라벨 스타일 지정 */ 
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), #css_tabs > label[for=tab1]:hover { 
    background:tomato; 
    color:#fff 
} 
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2), #css_tabs > label[for=tab2]:hover { 
    background:gold; 
    color:#fff 
} 
#css_tabs input:nth-of-type(3):checked ~ label:nth-of-type(3), #css_tabs > label[for=tab3]:hover { 
    background:green; 
    color:#fff 
} 
/* 실제 내용이 담긴 div 요소 스타일 지정 */ 
#css_tabs .tab1_content, #css_tabs .tab2_content, #css_tabs .tab3_content { 
    padding:2em; 
    border:1px solid #ddd; 
    width:70%; 
    height:100% 
}	

이 질문에 댓글 쓰기 :

답변 1

css에서 아래 부분 한번 체크해 보세요.
hover와 active를 같은효과로 넣어놨습니다.

크롬, 안드로이드 폰에서는 잘 작동하네요^^



#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), #css_tabs > label[for=tab1]:hover,
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), #css_tabs > label[for=tab1]:active { 
 background:tomato; 
 color:#fff 
} 
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2), #css_tabs > label[for=tab2]:hover,
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2), #css_tabs > label[for=tab2]:active { 
 background:gold; 
 color:#fff 
} 
#css_tabs input:nth-of-type(3):checked ~ label:nth-of-type(3), #css_tabs > label[for=tab3]:hover,
#css_tabs input:nth-of-type(3):checked ~ label:nth-of-type(3), #css_tabs > label[for=tab3]:active { 
 background:green; 
 color:#fff 
} 
답변을 작성하시기 전에 로그인 해주세요.
전체 60
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT