Member Avatar for millsy007

I have a menu div that I have styled so that is always visible on my page. When a user clicks a menu item they are taken to that section of that page using an anchor withing the page but the menu remains visible/constant to the left of the screen

My menu is made up of a number of vertically displayed tab images (set by assigning the background image of a href in css), what I would like to happen is that when a user navigates to an anchor section the background image for that section be changed to a 'current tab' image.

Usually this would be done by setting the class of that menu item to "current" within that page, for example if the menu navigated to a seperate about.html page for the about menu item set:

<a href="about.html" id="menu_about" class="current">about<div>
#menu a.current{
    background-position:0 -50px;
}

However on my page different pages (eg about.html) wont be loaded so what I would like to be able to do is dynamically set the 'class="current"' for the href element when a user clicks that link.

I tried the following but it didnt work:

<a href="home.html" class="home" id="home" onclick="document.getElementById("home").className="current";"><span class="nav-text">home</span></a>
  • 2 Contributors
  • 1 Reply
  • 160 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

You can achieved that result by doing this:

<a class="home" href="javascript:void(0);" id="home" onclick="this.className='current';">home</a>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.