Amonnn Amonnn - 4 months ago 12
Javascript Question

how to highlight item that has link to already selected menu

Extremely need help. I cant highlight selected (active) menu item. I created a module in Joomla that has images with links to menu items. It is like an additional menu.



<script>
</script>
<div class="links">
<a href="/news" ><img src="images/news.png" alt="news" width="23px" style="width: 23px;" /></a>

<a href="/articles"><img src="images/articles.png" alt="articles" width="23px" style="width: 23px;" /></a>

<a href="/twitter"><img src="images/twlink.png" alt="tw" width="23px" style="width: 23px;" /></a>

<a href="/facebook"><img src="images/fblink.png" alt="fb" width="23px" style="width: 23px;" /></a>
</div>





And now I would like to somehow highlight active menu, so if I on page "/news", the image "news" should have border at bottom (
.activemenu {border-bottom:1px #fff dotted}
)
What script I need to write between to make each selected link to get class "activemenu" or border at bottom?

Answer

Found answer for my question on another site. Maybe some1 would like to use it

function setActive() {
  aObj = document.getElementById('nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}

window.onload = setActive;
<nav id="nav" >
<a href="/news" ><img src="images/news.png" alt="news" width="23px" style="width: 23px;"  /></a> 

<a  href="/articles" ><img src="images/articles.png" alt="articles" width="23px" style="width: 23px;"  /></a> 

<a  href="/twitter" ><img src="images/twlink.png" alt="tw" width="23px" style="width: 23px;"  /></a> 

<a  href="/facebook" ><img src="images/fblink.png" alt="fb" width="23px" style="width: 23px;" title="ФЕЙСБУК" /></a>
</nav>

Comments