用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類沒有任何效果

回答

相關問題