CSS-Eigenschaft „display“ nicht richtig

Question

arbeiten ich Probleme mit der CSS-Eigenschaft mit> Anzeige> Auf meiner Seite I 4 div Elemente mit display = keine Eigenschaft versteckt haben jetzt mit Hilfe von JavaScript Ich möchte ich jede Eigenschaft separat angezeigt werden Ich bin in der Lage, die Elemente zu verstecken und kann sie beim Klicken erscheinen, aber es wird nie angezeigt, wie es sein sollte alle entweder Inline und die Formatierung ist falsch Ich habe eine Menge von Werten für die Anzeige verwendet zB: Inline, Block etc, aber ich immer noch kann es nicht richtig , wenn jemand mich schätzen krank helfen kann, es der Code ich verwende ist:

<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> 

die Seite, auf der ich das Ergebnis zu sehen ist:

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

, wenn Sie auf den Namen klicken Kochen zB Getränke, die Sie werden sehen, was über

Answer 1

spreche Es sollte display='none' statt display='hidden' sein.

Answer 2

Ihr Code ist sehr repetitiv. Versuche, es TROCKEN zu machen (wiederhole dich nicht). All das, was Sie brauchen:

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

Vorschlag. Ich sehe in der Ansicht Quelle, die Sie jQuery verwenden. Verwenden Sie $('#domelementname') anstelle von document.getElementById("a"). Es gibt mehr Repetiercode.

Answer 4

Sie müssen wahrscheinlich zwischen display:hidden und display:block umschalten, wie andere gesagt haben. Erwägen Sie, Klassennamen zu verwenden, anstatt die Stile direkt zu aktualisieren. Dadurch wird Ihr Code in Zukunft einfacher zu verwalten sein. Siehe auch @ blex's Antwort, da er einen guten Ratschlag hat, den Code weniger repetitiv zu machen.

Hier ist ein Beispiel von Klassen statt Stile direkt ändern:

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

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

Wenn Sie mehr als eine Klasse auf die Elemente verwenden müssen, versuchen classList.add('hide') und classList.remove('hide') statt.

Dann in Ihrem CSS, könnten Sie so etwas wie folgt verwenden:

.hide { 
    display: none; 
}