3
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>
Dude what would be "the tabs don’t respond" ? Which version of Materialize are you using? It’s not very clear your problem...
– hugocsl
I described the problem better, if you can take a look, thank you. Materialize version being used: 1.0.0.
– Deivid Souza
@Deividsouza for this to work, it is also necessary that the
ul
and theli
has the classes oftabs
andtab
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 links of tabs. I could understand?– Diego Souza
Where is Matheus' answer?
– Diego Souza
Look at that, very true. I’ll charge you
– Deivid Souza