2

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

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

谢谢！

4

4 回答 4

2

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

.show {
display: block !important;
height: 75px;
width: 100%;
background-color: #000;
}
于 2011-10-24T07:15:08.560 回答
2

有用。在这里查看我的示例：http: //jsbin.com/uyonuc

您确定将其设置为最初对 CSS 隐藏吗？

还可以尝试添加一个!importanttodisplay:block以确保它覆盖任何其他属性。

于 2011-10-24T07:16:26.483 回答
1

ID 选择器 ( #mainnav) 规则的优先级高于类选择器 ( .show) 规则。因此，display:none即使在您将 div 分配给 class 后，它也会持续存在.show。

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

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

于 2011-10-24T07:21:58.573 回答
0

改变这个：

.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器，因为新规则更具体。

于 2011-10-24T07:32:50.207 回答