How can I change the color

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
iffo
Forum Commoner
Posts: 37
Joined: Thu Oct 05, 2006 11:56 am

How can I change the color

Post by iffo »

Hi,

I have this site, you see home in red, It is through css.

http://natradersonline.com/temp/index.php

what i want when I click on some other menu item, it turn red and 'home' goes back to normal color.

Is it possible to change css throght javascript, I have an
onclick even in each menu, i tried something like this , but that gives me error.

Code: Select all

document.getElementById('home1').class= 'first active';
I appreciate your help.

Thanks
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Use jQuery, and this code snippet:

Code: Select all

$(document).ready(function(){
  var path=location.pathname.substring(1);
  if(path) $('#navlist a[@href$="'+path+'"]').set('id','current');
});
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

className is the property to alter for changing the CSS class, if memory serves. (Note: it may need to be all lower case, it's been a while.) Otherwise, you would alter the style property.
mtfoley
Forum Newbie
Posts: 2
Joined: Sat Nov 11, 2006 1:14 pm

Post by mtfoley »

semantically, it's best to change className property instead of style. It makes for cleaner code in javascript, and it lets CSS rules take care of the details. If you're going to make changes to an HTML element depending on an application state, and those changes are listed in several places, this would be a nice solution:

Code: Select all

hide(element){
  element.className = 'hidden';
}
show(element){
  element.className = 'shown';
}
and the CSS could be:

Code: Select all

.hidden{
  display:none;
}
.shown{
  display:block;
}
Post Reply