すべてのタブが表示されていますが、いつでも1つのタブのみを表示したいです

Question

誰かが下のjavascriptを見ることができますか？

私は3つのタブを作成したいと思います。選択したときに、1つのタブしか表示されません。

現在、以下のコードをテストすると、3つのタブがデフォルトで1つではなく1つだけ表示され、タブが選択されると他のタブは非表示になります。

<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

by default we are showing first tab, on click of the other tabs data will be shown accordingly, working demo is shown below 

Could someone take a look at the javascript below? I would like to create 3 tabs, with only one tab showing at any given time, when selected. Right now, when testing the below code, the 3 tabs show by default under each other (as opposed to only one) 
 
and only once a tab is selected, the other tabs are hidden. 
 
<style> 
 

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

 

 
<div id="General" class="tabcontent"> 
 
    General CONTENT 
 
</div> 
 

 
<div id="Product Specifications" class="tabcontent"> 
 
    Product Specifications CONTENT 
 
</div> 
 

 
<div id="Guarantee" class="tabcontent"> 
 
    GuaranteeCONTENT 
 
</div> 
 

 
<script> 
 
    // Get all elements with class="tabcontent" and hide them 
 
    var tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 1; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 
    // <![CDATA[ 
 
    function openCity(evt, cityName) { 
 
    // Declare all variables 
 
    var i, tabcontent, tablinks; 
 

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