<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
<li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
Problem :
I started working on DW (last version), (I used bootstrap component: “basic navbar” to insert the menu)
but I realize as soon as I click on a tab, it loads the page for me, but the tab does not remain highlighted.
Rem: (the “hover” works very well): as soon as I hover over the tabs the color changes well,
and so I would like it to keep for example this same color when the tab remains active so that the user knows
in which menu it is found.
I posted the code (generated by DW) but I’m not sure what to change in the code ??? and in the css?
Surprising all the same that this basic principle is not set by default in the component ??
In my css I just have the “hover” part.
Thank you for your advice because I’ve been struggling with this pb for several days (yet it seems to me to be a fairly common behavior … !!!)
If I have understood you correct, you want the link to be highlighted on the page where user is in. Try out
Comment posted by Jean
Avec votre solution, il me montre l’onglet actif par défaut mis en surbrillance mais dès que je clique sur un autre onglet, il ne le conserve pas. Pourquoi mon code est-il devenu illisible, les caractères semblent être dupliqués ???
Comment posted by Rifky Niyas
Can you please say that in english please?
Comment posted by Rifky Niyas
What I mean by replace is this. According to your code sample, In your navbar code in
Comment posted by upvoting and accepting the answer
If you find my answer useful and it solves your problem consider
Comment posted by Jean
Thank you for your answer!!! Indeed, it works for tabs: as soon as I change tab, this time it remains well highlighted but my pages are not loaded … I did not quite understand the fact of adding the “#” before the names of my pages to load but how can he load them in this case??? or there’s something I really didn’t understand??? I posted you my code readapted according to your template (only for the first 3 tabs)
