Question

我希望我的导航栏（以列表形式）在页面加载时保持不可见（display：none;），并在单击某些内容时显示（当前使用按钮）

这是我的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");
}

谢谢！

Answer 1

我认为js很好但问题在css中，尝试改变它如下。

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

Answer 2

有效。请参阅我的示例：http://jsbin.com/uyonuc

您确定要将其设置为最初隐藏在CSS中吗？

还可以尝试将!important添加到display:block，以确保它覆盖任何其他媒体资源。

Answer 3

ID选择器（#mainnav）规则的优先级高于类选择器（.show）规则。因此，即使您为div display:none分配了div，.show也会保留。

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

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

Answer 4

改变这个：

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

到此：

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

display:block类中的

.show将覆盖display:none选择器中的#mainnav，因为新规则更具体。

使用JavaScript更改CSS类无效

4 个答案: