Javascript、閉じるtab

Question

W3Schools - Fade in tab

私はこのコードを使用しています。たとえば、ロンドンをクリックすると、新しいタブのコンテンツが開きます。しかし、それは終わりではありません。私はそれを閉じたいので、私はメインのdivにクローズボタンを追加しました。しかし、私はそのスクリプトを書くことができませんでした。タブ内容を閉じるにはどうすればよいですか？

Answer 1

私はあなたが探しているものを手伝った。 Here

<h3>Fade in Tabs</h3> 

<ul class="tab"> 
    <li><a href="#" class="tablinks" onclick="openCity(event,  'London')">London</a></li> 
    <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li> 
    <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li> 
    <li><a href="#" class='tablinks' onclick='hideText()'>Hide</a></li> 

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

<script> 
function openCity(evt, cityName) { 
    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 < tabcontent.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

function hideText() { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
    tabcontent[i].style.display = "none"; 
    } 
} 
</script>