?
Solved

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

Posted on 2007-11-19
6
Medium Priority
?
577 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 2000 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

801 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