I have this code in JavaScript:

function change() {

        document.getElementById("mem").className = 'gif';

}

The fig and gif are like this:

a.fig {

background: #FFFFFF;

}

a.gif {

background: #000099  ;
}

and the function is used like this

<a class ="fig" id ="mem" onClick="javascript:change()" href="users" >

Where the only difference between gif and fig in CSS is that they have different background colors. The problem is that the change is only noticeable in just a second and it is not permanent!

Any ideas?

I have this code in JavaScript:

function change() {

        document.getElementById("mem").className = 'gif';

}

The fig and gif are like this:

a.fig {

background: #FFFFFF;

}

a.gif {

background: #000099  ;
}

and the function is used like this

<a class ="fig" id ="mem" onClick="javascript:change()" href="users" >

Where the only difference between gif and fig in CSS is that they have different background colors. The problem is that the change is only noticeable in just a second and it is not permanent!

Any ideas?

• javascript

• 1 How change() is called? Are you aware the if statement is meaningless? – Shadow Wizzard Commented Feb 9, 2011 at 13:59
• You're setting the same class ('gif') for both if statement possibilities. – djdd87 Commented Feb 9, 2011 at 14:00
• I'm confused... both if and else set the className to gif? Why have if-else then? – limc Commented Feb 9, 2011 at 14:01
• yes I know if statement is useless . Just tried something.. – mathew Commented Feb 9, 2011 at 14:01
• 1 Just add return false: onClick="change(); return false;" the thing is that without it, the class is changed then the page is redirected. – Shadow Wizzard Commented Feb 9, 2011 at 14:21

5 Answers 5

HTML:

<a id="mem" class="fig" href="users"> MEMBERS </a>

JavaScript:

var a = document.getElementById('mem');

a.onclick = function() {
    this.className = this.className == 'fig' ? 'gif' : 'fig';
}

Live demo: http://jsfiddle/eVQjB/

Note: in the demo, I return false; from the click handler to prevent the anchor from being activated.

function change() {
var mem = document.getElementById("mem");
    if (mem.className == 'fig') {
        mem.className = 'gif';
    }
    else {
        mem.className = 'fig';
    }
}

You may be looking for a different problem with JavaScript and styles, but if I understand your problem, you'll still need a different color for the anchor if it has been visited. You can let CSS do that for you:

#mem {
  background: #FFF;
}

#mem:visited {
  background: #009;
}

<a id="mem" href="users">Lead me to the promised land!</a>

you can try by following way

document.getElementById("idElement").setAttribute("class", "className");

IF still not working you r class is not chaning the style of your html element

Just add return false:

onClick="change(); return false;"

The thing is that without it, the class is changed then the page is redirected as this is the default behavior of anchor tag.

If you want to reload the page and change the class in the reloaded page, have such link:

href="?change=true"

Then in the server side code check for this flag and if true put different class. I'm not familiar with PHP but here is classic ASP version, hopefully similar enough to PHP:

<%
Dim sClassName
If Request("change")="true" Then
   sClassName = "gif"
Else  
   sClassName = "fig"
End If
%>
<a class ="<%=sClassName%>" id ="mem" href="?change=true">