Set li to active??

[Lasse]

Does anyone know how to make the current tab / page your are on to active and not only on hover?

My menu does change color when hover but i want it to be active when you click on it and switch when you go to another page



I tried to add li id="show" 

and css in global.css 

#show
      background-color: blue etc;
      color:FFF;

but then all li in the menu is active / the one i set it to but it dont switch when i go to another page

[Mostafa.Shiraali]

use active class like this:

<ul>
<li class="menuitem active">Page A</li>
<li class="menuitem">Page B</li>
<li class="menuitem">Page C</li>
</ul>

when add menu on page A add active for Page A
when add menu on page B add active for Page B
......

[Lasse]

use active class like this:

<ul>
<li class="menuitem active">Page A</li>
<li class="menuitem">Page B</li>
<li class="menuitem">Page C</li>
</ul>

when add menu on page A add active for Page A
when add menu on page B add active for Page B
......

Thanks for your reply

i tried this but when ever i go to another page it is still active

https://imgur.com/a/JRDUXT9

[Taylor M]

https://stackoverflow.com/questions/2006...sed-on-url

[Lasse]

https://stackoverflow.com/questions/2006...sed-on-url

Thanks for reply found a solution that works kinda

My home nav works now but when i switch to etc members it doesnt go active 

my nav: 

<div class="haut">
	
	<span class="useroptions">
		<ul id="menu-deroulant">
			<li><a href="{$mybb->settings['bburl']}"><i class=""></i>HJEM</a></li>
			<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class=""></i>MEDLEMMER</a></li>
			<li><a href="{$mybb->settings['bburl']}/misc.php?action=store"><i class=""></i>BLIV MEDLEM</a></li>
			<li><a href="{$mybb->settings['bburl']}/showteam.php">TEAM</a></li>
			<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class=""></i>HJÆLP</a></li>
			<li><a href="{$mybb->settings['bburl']}/search.php"><i class=""></i>SØG</a></li>
			{$welcomeblock}
		</ul>
	</span>
</div>

and my script i use placed on the index page:

		<script>
function setActive() {
  linkObj = document.getElementById('menu-deroulant').getElementsByTagName('a');
  for(i=0;i<linkObj.length;i++) { 
    if(document.location.href.indexOf(linkObj[i].href)>=0) {
      linkObj[i].classList.add("active");
    }
  }
}

window.onload = setActive;
</script>

and my css:

a.active {
    background-color: #227093;
    color: #fff;
}

---

Well i remove the script from header / index page 

added it to headerinclude insted and now it works on all pages but the HOME buttons stays active when switching page