擴展我的JavaScript代碼

Question

我已經制作了一個水平菜單，它可以像點擊切換器一樣工作。

我想添加一些代碼到JavaScript，將採取一個其他div id="rest"並關閉它（使其隱藏），同時我改變我的第一個（活動）選項卡。我附上了一張圖片，以更好地解釋我的情況：My page design

我只是需要，當div id="defaultOpen"改變時，那一個其他div與id="rest"被隱藏。

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

 
    var active = "defaultOpen"; 
 
    if (tab_id === 'defaultOpen') { 
 
    document.getElementById('rest').style.display = "none"; 
 
    } else { 
 
    document.getElementById('rest').style.display = "block"; 
 
    } 
 

 
} 
 

 
document.getElementById("defaultOpen").click();

<div class="content"> 
 
    <ul style="list-style: none; padding: 0;"> 
 
    <li> 
 
     <a href="javascript:void(0)" class="" onclick="openCity(event, 'London')" id="defaultOpen"> 
 
     <div class="tab-active"> 
 
      <img src="img/appoitments-active.png"> 
 
     </div> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="javascript:void(0)" class="active" onclick="openCity(event, 'Paris')"> 
 
     <div class="tab"> 
 
      <img src="img/prescription.png"> 
 
     </div> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="javascript:void(0)" class="" onclick="openCity(event, 'Madrid')"> 
 
     <div class="tab"> 
 
      <img src="img/health.png"> 
 
     </div> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="javascript:void(0)" class="" onclick="openCity(event, 'Rome')"> 
 
     <div class="tab"> 
 
      <img src="img/uploads.png"> 
 
     </div> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="javascript:void(0)" class="" onclick="openCity(event, 'Tokyo')"> 
 
     <div class="tab"> 
 
      <img src="img/medical.png"> 
 
     </div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

能否請你幫我這個？

非常感謝您的幫助。

Regards

Answer 1

您可以通過使用Javascript DOM事件偵聽器來解決此問題。

// Function to add event listener to table 

var el = document.getElementById("prescription"); //(Name your #ID here) 
el.addEventListener("click", function(){document.getElementById('rest').style.display = "block";}, false); 

在這裏，你可以通過你的需求描述見example

Answer 2

我有點困惑。我看了你的設計。請確認這是否符合期望：

頁面加載= 有5個（div id = rest）元素。每個頂級選項卡一個。除了處於活動狀態的第一個頂部選項卡之外，所有（div id = rest）元素都是隱藏的。

用戶單擊頂部選項卡2 = 現有可見（div id = rest）元素變爲隱藏。第二個（div id = rest）元素變得可見等等。

如果是那麼你的要求：

1. 不要對你（DIV ID =休息），他們的名字（DIV CLASS =休息休息）（DIV CLASS =休息rest2）（DIV CLASS =休息rest3）等，因爲應該只有一個頁面上的ID。

2. 對於每個（div class = tab），添加一個屬性（div class = tab data-controls = rest1）。 （div class = tab data-controls = rest2）對應於你想要顯示的div rest。

3. 在函數內部，您可以獲取當前選項卡的屬性並將其打開（div class = rest）。