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 から非表示に設定していますか?

また、!importanttoを追加しdisplay:blockて、他のプロパティをオーバーライドすることを確認してください。

于 2011-10-24T07:16:26.483 に答える
1

ID セレクター ( #mainnav) ルールは、クラス セレクター ( ) ルールよりも優先され.showます。したがって、display:nonediv に class を割り当てた後でも持続します.show。

最初に.hideクラスを使用してそれを に置き換えるか、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 に答える