I'm setting up a flap system, it's running 100%. The problem is when I open it on a mobile screen it has to scroll the tabs of the tab, just like the Android system.
Could anyone help me?
$(document).ready(function () {
$('.tab-content').each(function (i) {
var tabTitle = $(this).data('tab-title');
var current = $(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');
// Verifica se a aba atualiza a página
if (tab_id === "tab-0") {
location.reload();
}
$('.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
});
.tabs-container {
margin: 0 auto;
}
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;
cursor: pointer;
}
ul.tabs li.current {
color: #484848;
border-bottom: 2px solid #F65314;
}
.tab-content {
display: none;
padding: 15px;
}
.tab-content.current {
display: block;
}
.tab-link:hover {
color: #FBBC05;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="tabs-container">
<ul class="tabs"></ul>
<!-- Abas 1 -->
<div id="tab-1" data-tab-title="ABA 1" class="tab-content current">
Texto 1
</div>
<!-- Abas 2 -->
<div id="tab-2" data-tab-title="ABA 2" class="tab-content">
Texto 2
</div>
<!-- Abas 3 -->
<div id="tab-3" data-tab-title="ABA 3" class="tab-content">
Texto 3
</div>
<!-- Abas 3 -->
<div id="tab-4" data-tab-title="ABA 4" class="tab-content">
Texto 3
</div>
<!-- Abas 5 -->
<div id="tab-5" data-tab-title="ABA 5" class="tab-content">
Texto 3
</div>
<!-- Abas 3 -->
<div id="tab-6" data-tab-title="ABA 6" class="tab-content">
Texto 3
</div>
<!-- Abas 3 -->
<div id="tab-7" data-tab-title="ABA 7" class="tab-content">
Texto 3
</div>
<!-- Abas 3 -->
<div id="tab-8" data-tab-title="ABA 8" class="tab-content">
Texto 3
</div>
<!-- Abas 3 -->
<div id="tab-9" data-tab-title="ABA 9" class="tab-content">
Texto 3
</div>
<!-- Abas 3 -->
<div id="tab-10" data-tab-title="ABA 10" class="tab-content">
Texto 3
</div>
</div>