Question

我制作了一个水平菜单，就像点击一个换页器一样。

我想在JavaScript中添加一些代码，这些代码会占用另一个div id="rest"并在我更改第一个（活动）标签时将其关闭（隐藏）。我附上了一张图片，以便更好地解释我的情况：My page design

我只需要在更改div id="defaultOpen"时，隐藏另一个id="rest"的div。

 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>

你能帮我解决这个问题吗？

非常感谢你的帮助。

此致

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 = 现有的visible（div id = rest）元素变为隐藏状态。第二个（div id = rest）元素变得可见，等等。

如果那是你的要求那么：

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

扩展我的JavaScript代码

2 个答案: