JavaScript를 사용하여 CSS 클래스를 변경해도 아무 효과가 없습니다.

페이지로드시 보이지 않는 상태 (표시 : 없음;)로 유지되고 무언가가 클릭되었을 때 표시되도록 내 탐색 바를 표시하려고합니다 (현재는 내 자바 스크립트JavaScript를 사용하여 CSS 클래스를 변경해도 아무 효과가 없습니다.

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

입니다 : 버튼) 여기

내 HTML 코드입니다3210

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 선택에 display:none 우선합니다 .show 클래스

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

display:block 때문에 새로운 규칙은보다 구체적입니다.

출처

2011-10-24 07:32:50 Nick

JavaScript를 사용하여 CSS 클래스를 변경해도 아무 효과가 없습니다.

답변

관련 문제