Solved

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

Posted on 2007-11-19
6
575 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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 …

705 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