Question

我在JavaScript中使用此代码：

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 和 fig 之间的唯一区别是它们具有不同的背景颜色。问题是变化只是在一秒钟内才会发现，并且不是永久性的！

有什么想法吗？

Answer 1

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;以防止锚点被激活。

Answer 2

您可能正在寻找JavaScript和样式的不同问题，但如果我了解您的问题，如果已经访问了锚，您仍然需要不同的颜色。你可以让CSS为你做这件事：

#mem {
  background: #FFF;
}

#mem:visited {
  background: #009;
}

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

Answer 3

您可以按照以下方式尝试

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

如果仍然无法正常工作，那么你的课程并没有改变你的html元素的风格

Answer 4

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

Answer 5

只需添加return false：

onClick="change(); return false;"

没有它，就会更改类，然后重定向页面，因为这是锚标记的默认行为。

如果要重新加载页面并在重新加载的页面中更改类，请使用以下链接：

href="?change=true"

然后在服务器端代码检查此标志，如果为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">

Javascript问题！不改变CSS风格

5 个答案: