垂直タブは、すべてのブロック

Question

を表示する私はそれがすべてのブロックの代わりに、2人を表示し始めW3Schoolsの

var i, tabcontent, tablinks; 
 

 

 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 

 

 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 

 

 
    document.getElementById(cityName).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
}

div.tab { 
 
    float: left; 
 
    border: 1px solid #ccc; 
 
    background-color: #f1f1f1; 
 
    width: 30%; 
 
    height: 300px; 
 
} 
 

 
div.tab button { 
 
    display: block; 
 
    background-color: inherit; 
 
    color: black; 
 
    padding: 22px 16px; 
 
    width: 100%; 
 
    border: none; 
 
    outline: none; 
 
    text-align: left; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
div.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 
div.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 
.tabcontent { 
 
    float: left; 
 
    padding: 0px 12px; 
 
    border: 1px solid #ccc; 
 
    width: 70%; 
 
    border-left: none; 
 
    height: 300px; 
 
}

<div class="tab"> 
 
    <button class="tablinks" onclick="openCity(event, 'London')">London</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
 
</div> 
 

 
<div id="London" class="tabcontent"> 
 
    <h3>London</h3> 
 
    <p>London is the capital city of England.</p> 
 
</div> 
 

 
<div id="Paris" class="tabcontent"> 
 
    <h3>Paris</h3> 
 
    <p>Paris is the capital of France.</p> 
 
</div> 
 

 
<div id="Tokyo" class="tabcontent"> 
 
    <h3>Tokyo</h3> 
 
    <p>Tokyo is the capital of Japan.</p> 
 
</div>

Aあなたがここで見ることができます（https://www.alpaka-industries.de/index.php?hilfe/）から取ったコードに問題がありますまったくありません。

私は問題を見つけられず、誰かが助けてくれることを願っています。

私はそれがJavaコードでなければならないことは知っていますが、実際はすべて正しく表示されるように設定されていますが、どういうわけかそれは動作しません。

Answer 1

ページが読み込まれたときにコードが呼び出されていない可能性があります。あなたのjavascriptのコードにこれを追加してみてください -

window.onload = function(){ 
    hideAllCities(); 
} 

function hideAllCities(){ 
    var tabcontent = document.getElementsByClassName("tabcontent"); 
    for (var i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
}