Переопределение CSS-стиля «display: none» в javascript

Question

Я пытаюсь добавить переключатель галочки, который скрывает и показывает элементы списка, изменяя атрибут отображения стиля от «none» до «inline», но он не работает. Я устанавливаю стиль атрибута «display: none» в файле CSS. Затем я установил его в «display: inline» в javascript, когда кто-то проверяет коробку. Javascript успешно меняет свойство элемента на inline, но по какой-то причине элемент остается невидимым.

Если я делаю обратное, установив отображение в строку в CSS и переопределив его никому в javascript, он отлично работает. Я не понимаю, почему это будет работать в одном направлении, но не в другом.

Я использую хром. Вот код. Любые отзывы приветствуются.

CSS файл:

#tabmenu li[status='disabled'] a, a.active, #disabled { 
    color: #777777; 
    background: #DDDDDD; 
    font: normal 1em Arial; 
    border: 1px solid black; 
    border-radius: inherit; 
    padding: 0px 5px 0px 5px; 
    margin: 0px; 
    text-decoration: none; 
    cursor:hand; 
    display:none; 
} 

HTML:

<ul id="tabmenu">  
    <li name='tab' id='tab1' selected='no' status='disabled'></li>  
</ul> 

JAVASCRIPT (из командной строки или OnChange из флажком)

tab = document.getElementById('tab1'); 
tab.style.display = 'inline'; 

UPDATE: Я знаю, что я может просто переместить «display: none» из css и установить его на none pag e загрузить с javascript. Но если я это сделаю, он будет скрывать их после загрузки страницы, а это значит, что на более медленных компьютерах пользователь может увидеть, как они мгновенно закроются в видимости. Вот почему я использую css для установки начального состояния, а затем пытаюсь переопределить его, когда флажок установлен или снят.

ОБНОВЛЕНИЕ 2: Подчеркнем, что если я задаю элемент видимым в css, а затем спрячу его при замене флажка, этот код работает нормально. Но если элемент изначально установлен на невидимый в css, флажок не может сделать элемент видимым. Таким образом, это проблема, когда css «display: none» не может быть переопределен после загрузки страницы, но css «display: inline» может.

Answer 1

Вашего CSS скрывается в a элементе на вкладке, а не вкладка сам:

#tabmenu li[status='disabled'] a { 
} 

Изменение стиля вкладки не отменяет этого.

Если ваш CSS был вместо этого:

#tabmenu li[status='disabled'], a.active, #disabled { 
    ... 
} 

затем изменить display было бы полезно.

Answer 2

Вы установили элемент a внутри li, чтобы быть скрытым, поэтому установка закладки, которая будет видимой, недостаточна. Установка контейнера (li) не приведет к тому, что содержимое (a) будет видно.

Вы, вероятно, хотите, чтобы изменить правила к

#tabmenu li[status='disabled'], a.active, #disabled { 

Answer 3

Посмотрите этот путь, может быть, вы можете решить вашу проблему, используя следующие шаги:

Создать .visible класс по CSS с этим кодом:

.visible { 
    display: inline !important; 
} 

И создать еще один класс .hidden:

.hidden { 
    display: none !important; 
} 

И затем, используйте этот код Hide ваш элемент:

tab = document.getElementById('tab1'); 
tab.className = 'hidden'; 

И этот код Show ваш элемент:

tab = document.getElementById('tab1'); 
tab.className = 'visible'; 

Важно: с этим решением, вы можете начать с display:none на CSS без проблем установить видимый после, потому что тег !important на классах overwrite все, поэтому у вас не будет проблем, чтобы скрыть его.

Answer 4

CSS цели <a> тегов скрыто, JavaScript является изменением в <li>, ребенок <a> все еще будет скрыт

Answer 5

вы должны иметь функцию, которая будет проверять состояние флажка я добавил его к разметке

<ul id="tabmenu">  
<li name='tab' id='tab1' selected='no' status='disabled'>some text</li>  
</ul> 
<label> 
<input type="checkbox" id="check"/>show text 
</label> 

Тогда следующий код будет проверять состояние вашего флажка и изменить видимость вкладки

$(function() {  //document ready 
$('#check').click(display); //onclick checkbox display() will be performed, do not use onchange as you'll get in troubles with IE 

function display(){ 
tab=document.getElementById('tab1'); 
checkbox=document.getElementById('check') 
if (check.checked){ 
tab.style.display = 'inline'; 
} 
else{ 
tab.style.display='none'; 
} 
console.log(tab.style.display) 
} 
}); 

Или попробуйте сыграть здесь http://jsfiddle.net/766Nb/ Ps: на jsfiddle Я очищены CSS немного

Answer 6

для Hidde элемента Li вам нужно tab.style.display='none'; и для элемента show li вам нужно tab.style.display='list-item';.

Тогда необходимый код именно это:

JAVASCRIPT

function llm() 
{ 
     tab = document.getElementById('tab1'); 
    if (document.getElementById('Check1').checked==false) 
    { 
     tab.style.display = 'none'; 
    } 
    else 
    { 
     tab.style.display='list-item'; 
    } 
} 

HTML

<input type="checkbox" id="Check1" name="vehicle" value="Car" onclick="LLM();"> Checked 
<ul id="tabmenu">  
    <li name='tab' id='tab1' selected='no' status='disabled'></li>  
</ul> 

CSS

#tabmenu li[status='disabled'] a, a.active, #disabled { 
    color: #777777; 
    background: #DDDDDD; 
    font: normal 1em Arial; 
    border: 1px solid black; 
    border-radius: inherit; 
    padding: 0px 5px 0px 5px; 
    margin: 0px; 
    text-decoration: none; 
    cursor:hand; 
    display:none; 
} 

Я думаю, что это невозможно сделать только с помощью css. Если вам нужна дополнительная помощь, сообщите мне об этом.