2011-02-09 157 views
1

我有这样的代码在JavaScript:Javascript问题!不改变CSS样式

function change() { 

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

} 

无花果和GIF是这样的:

a.fig { 

background: #FFFFFF; 

} 

a.gif { 

background: #000099 ; 
} 

和函数用于这样

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

在CSS中,gif的唯一区别在于它们有不同的背景颜色。问题在于变化只在一秒之内就显而易见,并非永久!

任何想法?

+4

什么时候调用change()? – 2011-02-09 13:59:41

+1

如何调用change()?你是否知道if语句是毫无意义的? – 2011-02-09 13:59:48

+0

您正在为if语句的可能性设置相同的类('gif')。 – GenericTypeTea 2011-02-09 14:00:58

回答

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

您可以通过以下方式

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

如果还是尽量不工作,你R类别不chaning你的HTML元素的样式

3

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

现场演示:http://jsfiddle.net/eVQjB/

注:在演示中,我return false;从点击处理程序,以防止锚固被激活。

0

只需添加返回假:

onClick="change(); return false;" 

的事情是,如果没有它,该类改变,那么该页面被重定向,因为这是定位标记的默认行为。

如果你想重新加载页面,更改页面重新加载类的,有这样的链接:

href="?change=true" 

然后在这个标志,如果属实将不同类的服务器端代码检查。我不熟悉PHP但这里是传统的ASP版本,希望类似足以PHP:

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

你可能会寻找一个不同的问题与JavaScript和风格,但如果我理解你的问题,你会如果它已经被访问过,那么仍然需要一个不同颜色的锚。你可以让CSS为你做:

#mem { 
    background: #FFF; 
} 

#mem:visited { 
    background: #009; 
} 

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