切换多个div

Question

假设我创建了7个定位标记。 我给他们取名为ABOUT，STAFF，VOLUNTEER，FINANCE，SPONSORS，SUBMIT FILM和WINNERS。 另外，假设我创建了7个包含文本和图像之类的内容。 默认情况下，我将所有7隐藏。 仅锚标记显示一个接一个，如下所示：

[一二三四五六七]

使用称为“子菜单”的CSS，将所有锚点标记彼此水平排列，并排成一排，底色为白色，黑色，1像素宽，字体也为黑色。 简单。 没问题。

假设我给每个ID赋予了唯一的ID（例如，id =“ aboutsec”，id =“ staffsec”，id =“ volunteersec”等）？

使用在线找到的JavaScript片段，我设法显示了隐藏的内容，并在单击相同的锚标记时将它们隐藏了。 例如，当我单击标题为“关于”的锚标记时，它显示，而当我单击完全相同的锚时，它将隐藏它。

那部分很简单。

但是，假设当我单击锚点“关于”时，当我单击锚点“职员”或“志愿者”，“财务”或“赞助者”等时，我想隐藏吗？ 换句话说，切换？

我想要实现的是，当单击任何锚点时，显示其对应的，当单击其他锚点时，我希望它隐藏其他当前显示的锚点。 说得通？

这些是我当前正在使用的定位标记：

    <a href="javascript:void()" class="sub-menu" 
    onclick="showme()">About</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme2()">Staff</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme3()">Volunteer</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme4()">Finance</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme5()">Sponsors</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme6()">Submit Film</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme7()">Winners</a>

的标题使用ID：

    <section id="aboutsec" class="subsec" style="display:none">

我在每个图像的底部都有一个图像，该图像包裹在锚标签中，该标签使用相同的onclick函数有效隐藏了所显示的图像。 这部分工作正常。 所以，我所看到的是一个隐藏的情况。 太好了，但是如果有人点击“职员”或“志愿者”或任何其他锚点怎么办？ 它显示另一个，但不隐藏打开的。

这是我正在使用的JS，我不得不重复每个JS来显示和隐藏每个JS：

    <!--Show and hide sub-section About-->
    <script>
    function showme() {
    var x = document.getElementById("aboutsec");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
    }
    </script>

    <!--Show and hide sub-section Staff-->
    <script>
    function showme2() {
    var x = document.getElementById("staffsec");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
    }
    </script>

    <!--Show and hide sub-section Volunteer-->
    <script>
    function showme3() {
    var x = document.getElementById("volunteersec");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
    }
    </script>

Answer 1

您可以将href用作id来使用锚标记：

    <a href="#aboutsec" class="sub-menu" 
    onclick="showme(this)">About</a>
    <a href="#staffsec" class="sub-menu" 
    onclick="showme(this)">Staff</a>

然后使用它来获取所需的实际元素：

    <script>
    function showme(tag) {
      var x = document.querySelector(tag.href);
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>