asked on

need to change the CSS element ID of a list item in a html unordered list

I have site that is using a CSS based menu (made from an unordered list). I have a CSS element (#nav current) that sets the parameters for the "active" state for the <li> item that corresponds to the current page (see the CSS copied below)

I can manually add a id=current to an <li> to give it the "active" state I'm looking for - and could do this for each respective <li> on each appropriate page... except my content is dynamically loaded, so I only have one page and one menu. (all of the content is dynamically loaded into the body of my index.html page based on which button is clicked.

Soooooooo. (finally getting to the point) how can I dynamically set the appropriate menu item to <li id=active> based on the content that is loaded?

CSS:

#nav ul{
margin:0 0 0 0;
padding: 0;
list-style: none;
}

#nav li{ font-variant: small-caps; display: inline; margin: 0 5px 0 0; padding: 0 10px 0 0; }

#nav a{ float: left; display: block; color: white; font-size: 12px; font-family: Arial; font-style: normal; font-variant: normal; line-height: normal; background-image: url(images/background_light.png); background-repeat: repeat; background-attachment: scroll; text-decoration: none; margin: 4px 4px 0 0; /*Margin between each menu item*/
padding: 5px 10px; }

#nav a:hover{ color: white; background-image: url(images/background_yellow.png); }

#nav #current a{ /*currently selected tab*/
background-color: #fc0;
color: #000; background-image: none; margin-top: 0; border-top: 5px solid #fc0;
}

Göran Andersson

Use a class rather than an id to specify the current item.

So rahter than
#nav #current a
do
#nav .current a

If you dymaically create the elements, add a class="current" to the current item.

You can also use Javascript to assign a class to an element. Put different id:s on the elements so that you can access them from Javascript:

document.getElementById('IdOfSomeItem').className = 'current';

marglar

ASKER

Thanks GreenGhost.

I'm blowing it somewhere though. Any chance for some help to get this right? My site is www.pacificatechnologies.net

Göran Andersson

Add this Javascript code:

var currentLink = null;
function showpage(link, url, containerId) {
if (currentLink != null) currentLink.className.replace(' current', '');
currentLink = link;
link.className + = ' current';
ajaxpage(url, containerId);
}

Then change the href arguments in the menu like this:
from
javascript:ajaxpage('home.html', 'contentarea');
to
javascript:showpage(this, 'home.html', 'contentarea');

This will call the showpage function, which adds the "current" class to the element and then calls the ajaxpage function to fetch the content.

marglar

ASKER

Thanks but it seems like I'm getting more complex rather than less.. and, I couldn't get this to work.

Is there not a simple way to do this with CSS? It seems like I'm close but I'm just not getting it..

ASKER CERTIFIED SOLUTION

Göran Andersson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial