How to put a scroll in the flap system

1

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>
    
asked by anonymous 21.12.2016 / 19:39

1 answer

2

I added these two properties to ul.tabs :

white-space: nowrap;
overflow-x: auto;

$(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;
    white-space: nowrap;
    overflow-x: auto;
}
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 w100">
                <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>
    
21.12.2016 / 19:57