클릭했을 때 두 번째 및 세 번째 탭만 표시하는 방법

Question

두 번째 및 세 번째 탭을 클릭 할 때만 표시하고 싶습니다. 누군가 아래의 코드를보고 이것이 어떻게 성취 될 수 있는지 알아낼 수 있습니까? 지금은 탭 중 하나를 클릭 할 때까지 기본적으로 세 개의 탭이 표시되고 그 후에는 선택한 탭만 표시됩니다.

감사합니다.

<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