我希望我的导航栏(以列表的形式)在页面加载时保持不可见(显示:无；)，并在单击某些内容时显示(当前使用按钮)
这是我的 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");
}
谢谢!
最佳答案
我认为js很好，但问题出在css上，尝试像下面这样改变它。
.show {
display: block !important;
height: 75px;
width: 100%;
background-color: #000;
}
关于html - 使用 JavaScript 更改 CSS 类没有任何效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7872331/