Javascript Problème! Ne pas changer le style css

J'ai ce code en JavaScript:Javascript Problème! Ne pas changer le style css

function change() { 

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

}

La figue et gif sont comme ceci:

a.fig { 

background: #FFFFFF; 

} 

a.gif { 

background: #000099 ; 
}

et la fonction est utilisée comme celui-ci

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

Où la seule différence entre gif et fig en CSS est qu'ils avoir différentes couleurs de fond. Le problème est que le changement n'est visible que dans une seconde et il n'est pas permanent!

Des idées?

Source

2011-02-09 mathew

Quand 'change()' est-il appelé? –

Comment 'change()' est appelé? Etes-vous conscient que la déclaration 'if' n'a pas de sens? –

Vous définissez la même classe ('gif') pour les deux possibilités d'instruction. – GenericTypeTea

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

Source

2011-02-09 14:04:51

vous pouvez essayer en suivant façon

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

IF toujours pas vous travailler r classe n'est pas chaning le style de votre élément HTML

Source

2011-02-09 14:01:49 Ankur

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'; 
}

démonstration en direct:http://jsfiddle.net/eVQjB/

Note: dans la démo, je return false; du gestionnaire de clic pour empêcher l'ancrage d'être activé.

Source

2011-02-09 14:08:54

cool quelques lignes là, +1 –

Ajoutez simplement return false:

onClick="change(); return false;"

La chose est que sans elle, la classe est modifié, la page est redirigé comme cela est le comportement par défaut de balise d'ancrage.

Si vous voulez recharger la page et changer la classe dans la page reloaded, ont ce lien:

href="?change=true"

Puis dans le code côté serveur pour vérifier ce drapeau et si cela est vrai mis différentes classes. Je ne suis pas familier avec PHP, mais voici la version ASP classique, assez similaire à PHP, espérons-:

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

Source

2011-02-09 15:23:32

Eh bien cela fonctionne très bien .. Mais il ne semble pas suivre le lien en raison de la fausse déclaration de retour .. Mais j'ai besoin à la fois la couleur à changer et le lien à suivre .. Y a-t-il un moyen d'y parvenir? – mathew

@mat donc ce que vous avez vraiment besoin est une approche différente: avoir le lien d'envoyer le drapeau sur l'URL, puis si l'indicateur existe, mettre classe différente. Avez-vous une langue côté serveur à votre disposition? Une autre façon est d'utiliser AJAX. –

Oui, je travaille principalement en PHP .. Mais je ne comprends pas vraiment ce que vous voulez dire. Pouvez-vous m'expliquer un peu plus s'il vous plaît? Désolé d'être une douleur dans le cul ... – mathew

Vous cherchez peut-être un autre problème avec JavaScript et styles, mais si je comprends votre problème, vous encore besoin d'une couleur différente pour l'ancre si elle a été visitée. Vous pouvez laisser CSS faire cela pour vous:

#mem { 
    background: #FFF; 
} 

#mem:visited { 
    background: #009; 
} 

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

Source

2012-05-06 08:13:31 bytetron

Javascript Problème! Ne pas changer le style css

Répondre

Questions connexes