用JavaScript更改CSS类没有任何效果

我希望我的导航栏（即列表形式）在页面加载时保持不可见（display：none;），并在单击某物时显示（当前正在使用按钮）用JavaScript更改CSS类没有任何效果

这里是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 

<head> 
<script type="text/javascript" src="js/navbar.js"></script> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<script type=text/javascript> 
function changeClass(){ 
document.getElementById("mainnav").setAttribute("class", "show"); 
} 
</script> 
</head> 

<body> 

<div class="wrapper"> 

<input type="button" value="click" onClick="changeClass()"> 

<div id="mainnav"> 

<ul > 
<li>Home</li> 
<li>Emergency Repair Service</li> 
<li>Heating</li> 
<li>Air Conditioning</li> 
<li>Products</li> 
<li>Specials</li> 
<li>Contact</li> 
</ul> 

</div><!--mainnav-->

这里是我的CSS

#mainnav { 
display:none; 
} 

ul li { 
float: left; 
list-style-type: none; 
} 

.show { 
display: block; 
height: 75px; 
width: 100%; 
background-color: #000; 
}

下面是我的javascript

function changeClass(){ 
document.getElementById("mainnav").setAttribute("class", "show"); 
}

谢谢！

来源

2011-10-24 Philip

我认为js很好，但问题出在css上，请尝试像下面那样更改它。

.show { 
display: block !important; 
height: 75px; 
width: 100%; 
background-color: #000; 
}

来源

2011-10-24 07:15:08

它的工作原理。看到我的例子在这里：http://jsbin.com/uyonuc

你确定你最初设置它隐藏的CSS吗？

另请尝试添加!important至display:block以确保它覆盖任何其他属性。

来源

2011-10-24 07:16:26

ID选择器（#mainnav）规则的优先级高于类选择器（.show）规则。因此，display:none即使在您将div分配给类.show后也会持续存在。

您最初可以使用.hide类并将其替换为.show或在您的CSS中使用!important规则。

对CSS特异性的文章：http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

来源

2011-10-24 07:21:58 Kai

更改此：

.show { 
    display: block; 
    height: 75px; 
    width: 100%; 
    background-color: #000; 
}

这样：

#mainnav.show { 
    display: block; 
    height: 75px; 
    width: 100%; 
    background-color: #000; 
}

在.show类，然后将在#mainnav选择覆盖display:nonedisplay:block，因为新规则更具体。

来源

2011-10-24 07:32:50 Nick

用JavaScript更改CSS类没有任何效果

回答

相关问题