How to call tab

Question

I have a Navbar with some tabs (tabs) that if clicked on the link BEGINNING (for example), open a div with the main site information, if the link clicked is the GALLERY, then a new content is brought.

There was a need to call these tabs also through the Footer to facilitate the customer’s navigation, but I’m not able to call it.

My Navbar:

<!-- NAVBAR -->
    <nav class="nav-extended deep-orange">

        <div class="nav-wrapper center">
            <img style="margin-top: 25px;" src="imagem/logo.png" alt="">
        </div>

        <!-- Abas -->
        <div class="nav-wrapper" style="padding: 0 10% 0 10%">
            <ul class="tabs tabs-transparent tabs-fixed-width">
                <li class="tab"><a href="#inicio" class="active">Início</a></li>
                <li class="tab"><a href="#galeria">Galeria</a></li>
            </ul>
        </div>
    </nav>



    <!-- ABAS -->

    <!-- ABA INÍCIO -->
    <div id="inicio" class="col s12">
        <p>Início</p>
    </div>

    <!-- ABA GALERIA -->
    <div id="galeria" class="container">
       <p>Galeria</p>
    </div>

My footer, where it is not possible to call the tabs because they do not respond, that is, by clicking on BEGINNING or in GALLERY, nothing happens:

<footer class="page-footer deep-orange accent-4">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Estamos sempre à disposição</h5>
                <p class="grey-text text-lighten-4">Precisa de algo que não encontrou em nosso site? Entre em contato conosco que faremos o possível para atendê-lo (a).</p>
            </div>
            <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Menu</h5>
                <ul>
                    <li><a class="grey-text text-lighten-3" href="#!">Início</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">Galeria</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

What I tried were several ways I saw in tutorials, but it probably didn’t work because the forms used are already outdated. Calling by id pattern also didn’t work:

<li><a class="grey-text text-lighten-3" href="#inicio">Início</a></li>
<li><a class="grey-text text-lighten-3" href="#galeria">Galeria</a></li>

Answer 1

For this to work, you also need ul and li to have the tabs and tab classes respectively. However, this will break your layout. So, I suggest you create a jQuery function for each item of this and the function gave a Trigger in the tabs links.

Kind of:

Just watch out for the href, put a '-tab' in the name to be different from href from the tabs upstairs.

<ul class="links-rodape">
   <li class="links"><a class="grey-text text-lighten-3" href="#inicio-tab">Início</a></li>
   <li><a class="grey-text text-lighten-3" href="#galeria-tab">Galeria</a></li>
</ul>

jQuery

$(document).ready(function(){
    $('.links-rodape > .links > a').on('click', function({
       var tab = $(this).attr('href').replace('-tab', ''); // Remove o '-tab' do href

       // Trigger
       $('a[href="'+tab+'"]').click();
    });
});

Answer 2

Good morning Deivid,

The same code you used in the navbar can also be used in the footer as "anchor" to be taken to the session where your HTML is available.

I put the code below for you to test and illustrate the scenario better:

<!-- ABAS -->

<!-- ABA INÍCIO -->
<div id="inicio" class="col s12" style="margin-bottom: 500px; margin-top: 200px;">
    <p>Início</p>
</div>

<!-- ABA GALERIA -->
<div id="galeria" class="container" style="margin-bottom: 800px;">
   <p>Galeria</p>
</div>

<footer class="page-footer deep-orange accent-4">
<div class="container">
    <div class="row">
        <div class="col l6 s12">
            <h5 class="white-text">Estamos sempre à disposição</h5>
            <p class="grey-text text-lighten-4">Precisa de algo que não encontrou em nosso site? Entre em contato conosco que faremos o possível para atendê-lo (a).</p>
        </div>
        <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Menu</h5>
            <ul>
                <li><a class="grey-text text-lighten-3" href="#inicio">Início</a></li>
                <li><a class="grey-text text-lighten-3" href="#galeria">Galeria</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 3

HTML:

<ul class="links-rodape">
   <li class="links"><a class="grey-text text-lighten-3" href="#inicio-tab">Início</a></li>
   <li class="links"><a class="grey-text text-lighten-3" href="#galeria-tab">Galeria</a></li>
</ul>

jQuery:

<script>
                $(document).ready(function() {

                    // Chamar links do Menu do rodapé 
                    $('.links-rodape > .links > a').on('click', function(e) {
                        e.preventDefault();

                        var tab = $(this).attr('href').replace('-tab', ''); // Remove o '-tab' do href
                        tab = tab.replace('#', '');

                        const navbar = $('#tabSelector').get(0);
                        M.Tabs.getInstance(navbar).select(tab);
                    });
                }
</script>