Well I'm trying to make a tabbed browsing on a page, but I'm having a problem putting it responsive and not working anyone could help?
the code:
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
border-bottom: 1px solid #d7d7d7;
}
ul.tabs li {
background: none;
color: #616161;
display: inline-block;
padding: 10px 15px;
color:#000;
cursor: pointer;
}
ul.tabs li.current {
color: #484848;
border-bottom: 2px solid #F65314;
}
.tab-content{
color:#000;
}
<section class="loja" class="loja">
<div class="container cf">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>$(document).ready(function(){$('.tab-content').each(function(i){vartabTitle=$(this).data('tab-title');varcurrent=$(this).hasClass('current')?"current" : "";
var newTab = $('<li class="tab-link"></li>');
newTab.html(tabTitle)
.addClass(current)
.attr('data-tab', $(this).attr('id'));
$('ul.tabs').append(newTab)
})
$(document).on('click', '.tabs li', function() {
var tab_id = $(this).attr('data-tab');
$('.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
})</script>
<ul class="tabs"></ul>
<div id="tab-1" data-tab-title="Tab 1" class="tab-content current">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="_opcoes_main">
<form target="_blank" action="elos2.php" id="_form" onsubmit="return valEmail()" method="post">
<input type="hidden" id="_valortt" name="_valortt" />
<div class="_opcoes_div">
<em>1.</em> <strong>Escolha a Liga e Divisão atual</strong>
<br />
<img id="img/img_ligatual" src="img/img_bronze.png" />
<br />
<p>Liga</p>
<select name="lig_atu" id="lig_atu">
<option value="bronze">Bronze</option>
<option value="prata">Prata</option>
<option value="ouro">Ouro</option>
<option value="platina">Platina</option>
<option value="diamante">Diamante</option>
</select>
<br />
<p>Divisão</p>
<select name="div_atu" id="div_atu">
<option value="v">V</option>
<option value="iv">IV</option>
<option value="iii">III</option>
<option value="ii">II</option>
<option value="i">I</option>
</select>
</div>
<div class="_opcoes_div">
<em>2.</em> <strong>Escolha a Liga e Divisão desejada</strong>
<br />
<img id="img/img_ligades" src="img/img_bronze.png" />
<br />
<p>Liga</p>
<select name="lig_des" id="lig_des">
<option value="bronze">Bronze</option>
<option value="prata">Prata</option>
<option value="ouro">Ouro</option>
<option value="platina">Platina</option>
<option value="diamante">Diamante</option>
</select>
<br />
<p>Divisão</p>
<select name="div_des" id="div_des">
<option value="v">V</option>
<option value="iv">IV</option>
<option value="iii">III</option>
<option value="ii">II</option>
<option value="i">I</option>
</select>
</div>
<div class="_opcoes_div">
<em>3.</em> <strong>Escolha a Fila desejada</strong>
<br />
<img id="img/img_flex" src="img/img_soloduo.png" />
<br />
<p>Fila</p>
<select name="_fila" id="_fila">
<option value="solo/duo">Solo/Duo</option>
<option value="flex">Flex</option>
</select>
</div>
<br clear="all" />
<div id="_botao">
<div id="_errmsg" style="display: none;">Opa, você selecionou uma opção invalida!</div>
<div id="_botao_email" style="display: none;">
<label>
<strong>E-mail</strong>
<br />
<input onkeyup="$('#_botao #_botao_email label strong').html('E-mail').css('color','#444')" required="required" id="_email" name="_email" type="email" placeholder="Insira seu e-mail" />
</label>
<br />
<button type="submit" id="_botao_valor">
<div>
R$ 0,00
</div>
<div>
ADQUIRIR
</div>
</button>
</div>
</div>
</form>
<div id="_modal">
Obrigado pela compra!
<span id="_modal_fecha" onclick="$('#_modal').hide()">X</span>
</div>
</div>
<div id="tab-2" data-tab-title="Tab 2" class="tab-content">
bla bla bla
<br>bal bal balbla bla bla
<br>bal bal bal
</div>
<div id="tab-3" data-tab-title="Tab 3" class="tab-content">
bla bla bla 2
<br>bal bal balbla bla bla
<br>bal bal bal
</div>
</section>