Solved

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

Posted on 2007-11-19
6
571 Views
Last Modified: 2012-08-13
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;  
}

0
Comment
Question by:marglar
  • 3
  • 2
6 Comments
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20318071
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';
0
 

Author Comment

by:marglar
ID: 20321375
Thanks GreenGhost.

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


0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20322246
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.
0
 

Author Comment

by:marglar
ID: 20322867
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..


0
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 500 total points
ID: 20323608
Just two minor problems...

In the function
link.className + = ' current';
should be
link.className += ' current';

In the links, if you put the Javascript in the url, "this" doesn't refer to the link. Put the code in onclick:

<a href="#" onclick="showpage(this, 'home.html', 'contentarea');return false;" class="nav-home">

Oh, and of course you have to add a .current class to your css to see any effect.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

947 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now