Solved

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

Posted on 2007-11-19
6
573 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to delete "dots" above Bootstrap 3 navbar 4 51
How to resize a div in html 3 35
check a checkbox of a checkboxes group in bootstrap 2 39
Media Queries  not Firing 6 17
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

789 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