扩展我的JavaScript代码

问题描述：

我已经制作了一个水平菜单，它可以像点击切换器一样工作。扩展我的JavaScript代码

我想添加一些代码到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

我在您的html中没有看到任何id =“rest”。此外，没有tabcontent的className，tablinks和活动。 – wscourge

答

您可以通过使用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

答

我有点困惑。我看了你的设计。请确认这是否符合期望：

页面加载= 有5个（div id = rest）元素。每个*选项卡一个。除了处于活动状态的第一个顶部选项卡之外，所有（div id = rest）元素都是隐藏的。

用户单击顶部选项卡2 = 现有可见（div id = rest）元素变为隐藏。第二个（div id = rest）元素变得可见等等。

如果是那么你的要求：

不要对你（DIV ID =休息），他们的名字（DIV CLASS =休息休息）（DIV CLASS =休息rest2）（DIV CLASS =休息rest3）等，因为应该只有一个页面上的ID。
对于每个（div class = tab），添加一个属性（div class = tab data-controls = rest1）。（div class = tab data-controls = rest2）对应于你想要显示的div rest。
在函数内部，您可以获取当前选项卡的属性并将其打开（div class = rest）。

扩展我的JavaScript代码

相关推荐