Question

所以我想在我的页面中添加一些功能，允许用户在几个集合中仅切换他们想要的信息的可见性，但是它们相互散布。我最初是根据this link尝试过的，就像这样：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
   <HEAD>
      <TITLE></TITLE>
    <link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>
   </HEAD>
   <BODY>
      <P><a href="javascript:unhide('iron');">Toggle Silver Veins</a> | <a href="javascript:unhide('iron');">Toggle Iron Veins</a> | <a href="javascript:unhide('gold');">Toggle Gold Veins</a> | <a href="javascript:unhide('platinum');">Toggle Platinum Veins</a></p>

    <div id="gold" class="hidden">this is a gold</div>
    <div id="iron" class="hidden"> this is an iron</div>
    <div id="gold" class="hidden">this is a gold again</div>
    <div id="platinum" class="hidden"> this is a platinum</div>
    <div id="silver" class="hidden">this is a silver</div>
   </BODY>
</HTML>

请原谅糟糕的格式，我实验得很乱。

Style.css只包含

.hidden { display: none; }
.unhidden { display: block; }

对于只有一个实例的那个，但对于＆＃34; gold，＆＃34;它只会用id来切换第一个div。然后我尝试从this post和this post收集信息，但最终还是无法让我满意。

第一篇文章适用于同一组的多个实例，但我不够精明，无法使其适用于多个不同集合的多个实例，而不会重复四次脚本。我很感激你的意见，谢谢你！

Answer 1

试试这个：

<强> HTML：

<p id='nav'> <a id="show_silver">Toggle Silver Veins</a> | <a id="show_iron">Toggle Iron Veins</a> | <a id="show_gold">Toggle Gold Veins</a>
</p>

<div id="menu">
    <div id="menu_silver">Toggle Silver Veins</div>
    <div id="menu_iron">Toggle Iron Veins</div>
    <div id="menu_gold">Toggle Gold Veins</div>
</div>

<强> JQuery的：

$(document).ready(function () {
    $("#nav a").click(function () {
        var id = $(this).attr('id');
        id = id.split('_');
        $("#menu div").hide();
        $("#menu #menu_" + id[1]).toggle();
    });
});

<强> JSFiddle Demo

<强>更新

卸下：

$("#menu div").hide();

在用户点击它们的同时显示多个div。

<强> JSFiddle Demo

P.S：在您的代码中ID并不是唯一的。

Answer 2

HTML ID必须是唯一的。这就是为什么你的div包含ID＆＃34; gold＆＃34;。

的错误

如果您需要能够引用多个元素，我建议使用类。

<div class="gold hidden">this is a gold</div>
<div class="gold hidden">this is a gold again</div>

如何使用链接或复选框切换内容集

2 个答案: