onclickが起動した後、htmlでvarの値を取得する方法は？

Question

ナビゲーションバーで、onclick="dismiss(tabName); というタブを閉じようとしています。私は、onclick javascript関数onclick="dismiss('Paris');にdiv名を追加すると、Parisというタブを閉じることができます。

しかし、これにより、パリのタブのみを閉じることができます。私は開いているタブを閉じたいと思います。

現在アクティブなタブの値を動的に受け取って、これをonclick="dismiss(tabName);に渡してタブを閉じることができますか？

ここ

の作業例https://jsfiddle.net/av2o94bL/

これはJavaScript関数です：

function openCity(evt, cityName, ThirdValue) { 
    // 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 link that opened the tab 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
    var text = document.getElementById(cityName); 
    text.innerHTML = text.innerHTML.replace('{var}',thirdValue); 

} 
function dismiss(cityName) 
    { 
    document.getElementById(cityName).style.display='none'; 
}; 

、これはhtmlです：

<ul class="tab"> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London', 'capital')">London</a></li> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris', 'France')">Paris</a></li> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo', 'Japan')">Tokyo</a></li> 
    <li><a id="dismiss" class="tablinks" onclick="dismiss('Paris');"><b>close tab</b></li> 
</ul> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the {var} city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of {var}</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of {var}.</p> 
</div> 

Answer 1

だけ変数に現在のタブの名前を保存

var currentTab = null; 

function openCity(evt, cityName, ThirdValue) { 
    ... 
    currentTab = cityName; 
} 

function dismiss() 
{ 
    document.getElementById(currentTab).style.display='none'; 
}; 

https://jsfiddle.net/cxwqrdgp/9/

Answer 2

答えはあなた自身の問題です。他のタブは、現在のタブとは別に非アクティブに設定しています。あなたは、単にこれを格納する変数を使用するか、単にあなたのコード内のどこでもを置くことができないこの

function getActiveTab(){ 
    var tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     if(tabcontent[i].style.display!=="none"){ 
      return tabcontent[i].id; 
     } 
    } 
}