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

잘되야될텐데

2014-04-24 (목) 11:52:37 9,208

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

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

html

Copy

<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

Copy

#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% }

그누보드5 html5 크로스브라우징 css

답변 1개 / 댓글 1개

채택된 답변

+20 포인트

지더블류

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2014-04-24 (목) 13:34:09

css에서 아래 부분 한번 체크해 보세요.

hover와 active를 같은효과로 넣어놨습니다.

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

Copy

#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 
}

답변에 대한 댓글 1개

잘되야될텐데

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2014-04-25 (금) 13:45:08

정말 감사합니다. 정말 큰 도움 되었습니다. 저 역시 안드로이드폰에서 작동이 잘 됩니다.
즐겁고 행복한 하루 되세요 복 많이 받으실거에요

답변을 작성하려면 로그인이 필요합니다.

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

답변 1개 / 댓글 1개

답변에 대한 댓글 1개

공유하기