Javascript, закрытие вкладки

Question

W3Schools - Fade in tab

Я использую этот код. Например, когда я нажимаю «Лондон», открывается новый вкладка. Но это не закрытие. Я хочу закрыть его, поэтому я добавил кнопку закрытия в главном div. Но я не мог написать этот сценарий. Что делать с закрытием tabcontent?

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>