Javascript, close tab

Question

W3Schools - Fade in tab

Ich verwende diesen Code. Wenn ich zum Beispiel auf London klicke, öffnet sich ein neuer Tab-Inhalt. Aber es schließt nicht. Ich möchte es schließen, also habe ich einen Schließen-Button im Hauptdiv hinzugefügt. Aber ich konnte dieses Skript nicht schreiben. Was muss ich tun, um Tabcontent zu schließen?

Answer 1

Ich machte eine Fiedel mit dem, was Sie suchen. 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>