使用 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");
}
谢谢！
I want my nav bar (that is in the form of a list) to stay invisible (display: none;) on page load, and to appear when something is clicked (currently using a button)
here is my HTML code:
<!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-->
Here is my CSS
#mainnav {
display:none;
}
ul li {
float: left;
list-style-type: none;
}
.show {
display: block;
height: 75px;
width: 100%;
background-color: #000;
}
Here is my javascript
function changeClass(){
document.getElementById("mainnav").setAttribute("class", "show");
}
thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
将其更改
为：
.show 类中的
display:block将覆盖#mainnav中的display:nonecode> 选择器，因为新规则更加具体。Change this:
to this:
display:blockin the.showclass will then overridedisplay:nonein the#mainnavselector, because the new rule is more specific.我认为 js 很好，但问题出在 css 中，尝试像下面这样更改它。
I think js is good but problem is in css, try change it like below.
有用。请参阅我的示例：http://jsbin.com/uyonuc
您确定将其设置为隐藏吗最初来自CSS？
另请尝试将
!important添加到display:block以确保它覆盖任何其他属性。It works. See my example here: http://jsbin.com/uyonuc
Are you sure you're setting it to be hidden from the CSS initially?
Also try adding a
!importanttodisplay:blockto make sure it overrides any other property.ID 选择器 (
#mainnav) 规则的优先级高于类选择器 (.show) 规则。因此，即使您为 div 分配了.show类，display:none仍会保留。您最初可以使用
.hide类，并将其替换为.show或在 CSS 中使用!important规则。关于 CSS 特异性的文章：http://coding.smashingmagazine。 com/2010/04/07/css-特异性和继承/
ID selector (
#mainnav) rules have a higher precedence than class selector (.show) rules. Therefore,display:nonewill persist even after you assign your div the class.show.You could initially use a
.hideclass and replace it with a.showor use an!importantrule in your CSS.An article on CSS specificity: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/