Изменение CSS-класса с помощью JavaScript не имеет никакого эффекта - PullRequest
Новая
       5

Изменение CSS-класса с помощью JavaScript не имеет никакого эффекта

1 голос
/ 24 октября 2011

Я хочу, чтобы моя навигационная панель (то есть в виде списка) оставалась невидимой (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");
}

спасибо!

Ответы [ 4 ]

2 голосов
/ 24 октября 2011

Работает. Смотрите мой пример здесь: http://jsbin.com/uyonuc

Вы уверены, что изначально устанавливаете его как скрытый от CSS?

Также попробуйте добавить !important к display:block, чтобы убедиться, что оно перекрывает любое другое свойство.

2 голосов
/ 24 октября 2011

Я думаю, что js это хорошо, но проблема в css, попробуйте изменить его, как показано ниже. 

.show {
display: block !important;
height: 75px;
width: 100%;
background-color: #000;
}
1 голос
/ 24 октября 2011

Правила выбора идентификатора (#mainnav) имеют более высокий приоритет, чем правила выбора класса (.show). Следовательно, display:none будет сохраняться даже после того, как вы назначите вашему div класс .show.

Вы можете изначально использовать класс .hide и заменить его на .show или использовать правило !important в своем CSS.

Статья о специфике CSS: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

0 голосов
/ 24 октября 2011

Измените это: 

.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, потому чтоновое правило более конкретное.

...