CSS свойство «Дисплей» не работает должным образом

Question

Я имею проблемы со свойством CSS> дисплей> На моей странице я скрыл 4 DIV элементов, используя дисплей = нет свойства сейчас, используя JavaScript Я хочу, чтобы отобразить каждое свойство отдельно I я могу скрыть эти элементы и могу сделать их отображаемыми по клику, но он никогда не отображается, как если бы он был либо встроенным, либо неправильным форматированием Я использовал множество значений для отображения, например: inline, block и т. д., но я все еще не может получить это право , если кто-то может помочь мне плохо оценить это код я использую:

<script type="text/javascript"> 
document.getElementById("a").style.display="none"; 
document.getElementById("b").style.display="none"; 
document.getElementById("c").style.display="none"; 
document.getElementById("d").style.display="none"; 
function myFunctionA() { 
document.getElementById("a").style.display="block"; 
document.getElementById("b").style.display="hidden"; 
document.getElementById("c").style.display="hidden"; 
document.getElementById("d").style.display="hidden"; 
} 
function myFunctionB() { 
document.getElementById("b").style.display="initial"; 
document.getElementById("a").style.display="hidden"; 
document.getElementById("c").style.display="hidden"; 
document.getElementById("d").style.display="hidden"; 
} 
function myFunctionC() { 
document.getElementById("c").style.display="initial"; 
document.getElementById("a").style.display="hidden"; 
document.getElementById("b").style.display="hidden"; 
document.getElementById("d").style.display="hidden"; 
} 
function myFunctionD() { 
document.getElementById("d").style.display="initial"; 
document.getElementById("a").style.display="hidden"; 
document.getElementById("b").style.display="hidden"; 
document.getElementById("c").style.display="hidden"; 
} 
</script> 

страница, на которой я вижу результат является:

http://theinformant.to/food-drink/

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

Answer 1

Это должно быть display='none' вместо display='hidden'.

Answer 2

Ваш код очень повторяющийся. Попробуйте сделать это СУХОЙ (не повторяйте себя). Все, что вам нужно это:

function myFunction(id){ 
 
    var elements = document.querySelectorAll('.element'); 
 
    for(var i=0; i<elements.length; i++){ 
 
    elements[i].style.display = elements[i].id == id ? 'block' : 'none'; 
 
    } 
 
}

.element{display: none;} #a{display: block;}

<button onclick="myFunction('a')">Show A</button> 
 
<button onclick="myFunction('b')">Show B</button> 
 
<button onclick="myFunction('c')">Show C</button> 
 
<button onclick="myFunction('d')">Show D</button> 
 

 
<div id="a" class="element">A</div> 
 
<div id="b" class="element">B</div> 
 
<div id="c" class="element">C</div> 
 
<div id="d" class="element">D</div>

Answer 3

Предложение. В исходном представлении я использую jQuery. Попробуйте использовать $('#domelementname') вместо document.getElementById("a"). Существует более повторяющийся код.

Answer 4

Возможно, вам нужно переключиться между display:hidden и display:block, как говорили другие. Рассмотрите возможность использования имен классов вместо непосредственного обновления стилей. Это сделает ваш код более управляемым в будущем. Кроме того, см. Ответ @ blex, так как у него есть хороший совет сделать код менее повторяющимся.

Вот пример использования классов вместо изменения стилей непосредственно:

/* Hide an element */ 
document.getElementById('a').className = 'hide'; 

/* Show an element */ 
document.getElementById('a').className = ''; 

Если вам нужно использовать более одного класса на элементы, попробуйте classList.add('hide') и classList.remove('hide') вместо этого.

Затем в CSS, вы могли бы использовать что-то вроде этого:

.hide { 
    display: none; 
}