クリックしたときに2番目と3番目のタブのみを表示する方法

Question

2番目と3番目のタブをクリックすると表示されるようにしたいと思います。誰かが下のコードを見て、これをどのように達成できるか把握するのに役立つでしょうか？現在、タブの1つがクリックされるまで、デフォルトで3つのタブが表示され、その後に選択したタブのみが表示されます。

多くの感謝！

<div class="tab"><button class="tablinks" onclick="openCity(event, 
'General')"><span size="4" style="font-size: small;"><span color="grey" 
style="color: grey;"><b>General</b></span></span></button> <button 
class="tablinks" onclick="openCity(event, 'Product Specifications')"><span 
size="4" style="font-size: small;"><span color="grey" style="color: grey;"> 
<b>Product Specifications</b></span></span></button><button class="tablinks" 
onclick="openCity(event, 'Guarantee')"><span size="4" style="font-size: 
small;"><span color="grey" style="color: grey;"><b>Guarantee</b></span> 
</span></button></div> 
<div id="General" class="tabcontent"> 
CONTENT 
</div> 
<div id="Product Specifications" class="tabcontent"> 
CONTENT 
</div> 
<div id="Guarantee" class="tabcontent"> 
CONTENT 
</div> 

<script>// <![CDATA[ 
function openCity(evt, cityName) { 
    // Declare all variables 
    var i, tabcontent, tablinks; 

    // Get all elements with class="tabcontent" and hide them 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 

    // Get all elements with class="tablinks" and remove the class "active" 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", 
""); 
    } 

    // Show the current tab, and add an "active" class to the button that 
opened the tab 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 
// ]]></script> 

Answer 1

テンプレートとしてW3Schoolsを使用しています。単に元のテンプレートを使用して、スタイリングとコンテンツを好みに変えてみませんか？リンクは以下の通りです。

W3Schools