0

Estou criando um site mobile e em uma determinada parte existe um sistema de abas. O sistema é puro css que encontrei pela internet... O problema é que quando o site é visualizado pelo celular, as abas não funcionam direito. No iOS por exemplo, nem chega a funcionar.. já em alguns Androids, funciona e em outros não.

HTML:

<div class="tabs" id="tabs-1">
    <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
    <input id="tab-1-2" name="tabs-group-1" type="radio" />
    <input id="tab-1-3" name="tabs-group-1" type="radio" />

    <label for="tab-1-1">ABA 1</label>
    <label for="tab-1-2">ABA 2</label>
    <label for="tab-1-3">ABA 3</label>

    <!-- Aba 1 -->
    <div class="tab-content">
      CONTEUDO ABA 1
    </div>

    <!-- Aba 2 -->
    <div class="tab-content">
      CONTEUDO ABA 2
    </div>

    <!-- Aba 3 -->
    <div class="tab-content">
      CONTEUDO ABA 3
    </div>

CSS:

.tabs input[type='radio'] { display:none }
.tabs label {
  width:100px; text-align:center; padding:20px 0;
  color:#666666; font-size:2.1em; font-family:'DIN-Light'; background-color:#EEEEEE;
  display:inline-block;
  cursor:pointer;
}
.tab-content { display:none; background-color:#F3F3F3; border-top:6px #FE7B43 solid; width:300px; text-align:center; padding:50px 0; position:relative; }
#tabs-1 :checked + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + .tab-content { display: block }

Exemplo online.

Alguém sabe por que isso?

1
  • Ninguém sabe? :P
    – Ricardo
    8/10/2014 às 13:26

1 Resposta 1

1

Cara, acho q o problema esta neste trecho de código

#tabs-1 :checked + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + .tab-content { display: block }

melhor você trocar esse código e usar jquery tabs, é mais garantido

http://jqueryui.com/tabs/

1
  • Exatamente. Troquei por um script jquery e funcionou. Valeu.
    – Ricardo
    8/10/2014 às 16:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .