CSSのプロパティ "display"が正しく動作しない

Question

私はCSSプロパティに問題があります。>表示> 私のページでは、display = noneプロパティを使用して4 div要素を非表示にしています javascriptを使用しています。要素を非表示にすることができ、クリックに表示されるようにすることができますが、すべてのインラインと書式設定が間違っているような表示はしません。 表示には多くの値を使用しました。たとえば、インライン、誰かが病気それは私が使用していたコードを 感謝私を助けることができれば、右 それを得ることができないです。

<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

あなたのコードは非常に反復的です。 DRY（自分を繰り返さないでください）にしてみてください。

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を使用しています。 document.getElementById("a")の代わりに$('#domelementname')を使用してください。より多くの反復コードがあります。

Answer 4

おそらくdisplay:hiddenとdisplay:blockの間で切り替える必要があります。スタイルを直接更新する代わりにクラス名を使用することを検討してください。これにより、コードをより管理しやすくすることができます。また、@ blexの答えを参照してください。彼はコードを繰り返しにくくするための良いアドバイスを得ています。あなたが要素に複数のクラスを使用する必要がある場合は、classList.add('hide')とclassList.remove('hide')が代わりにしてみてください

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

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

：

はここでクラスを使用する代わりに、スタイルを直接変更する例です。あなたが望むものに、より具体的な詳細と質問を編集してください

.hide { 
    display: none; 
}