How to put a scroll in the tab system

Asked

Viewed 230 times

1

I’m setting up a flap system, it’s working 100%. The problem is when I open it on a mobile screen it has to scroll in the header of the tabs, same as the Android system.

Could someone 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>



<div class="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>

javascript jquery html css

  • the widthcontainer has to be fixed?

  • 1

    The problem is that the width being fixed, the ul tabs do not see that she is in a "tight space", that is, the smallest space she sees is 920px.

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>
<div class="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>

  • 1

    Good worked partially, when you put the tabs inside the container does not work, I edited the question for you see the error.

  • 1

    Very good thank you.

  • I’m sorry, I didn’t understand "Sinha". You speak a sign indicating that has scroll?

  • Sorry was the broker, 'SETINHA' to indicate that have hidden options.

  • 1

    If the following code is true: $("ul.tabs")[0].scrollWidth - $("ul.tabs").width() != $("ul.tabs").scrollLeft(), means that there is something hidden to the right. Then just put some action indicating that there is something to the right.

  • have how to edit your answer? I tried here more this not working hahahah

Show 1 more comment

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.