Solved

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

Posted on 2007-11-19
6
570 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 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 …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 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

21 Experts available now in Live!

Get 1:1 Help Now