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

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

javascript jquery html css

Javascript 如何使用链接或复选框切换内容集,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，我想在我的页面中添加一些功能，允许用户只在他们想要的信息上切换可见性，在多个集合中，但这些集合相互交错。我最初是根据，比如： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE></TITLE>

因此，我想在我的页面中添加一些功能，允许用户只在他们想要的信息上切换可见性，在多个集合中，但这些集合相互交错。我最初是根据，比如：

    <!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>

这对于那些只有一个实例的应用程序来说已经足够好了，但是对于“gold”，它只会用id切换第一个div。然后我尝试从和中收集信息，但最终无法找到令我满意的答案

第一篇文章将处理同一个集合的多个实例，但我不够精明，无法在不将脚本复制四次的情况下使它处理多个不同集合的多个实例。谢谢你的建议，谢谢

试试这个：

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>

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

更新

删除：

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

在用户单击时同时显示多个

div

p.S:代码中的

ID

不是唯一的。

HTML ID必须是唯一的。这就是为什么包含ID“gold”的div出现错误的原因

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

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

这是一块金子
这又是一块金子

。没有人会一个帖子一个帖子的来检查你的工作。对不起，我只是按照我在其他帖子中看到的来做的。编辑，太接近了！它可以加载多个实例，但理想情况下，我希望它们能够切换任意多个选项，而不是一次只切换一个。这有多可能？谢谢你迄今为止的帮助。如果我错了，请纠正我，但这似乎不允许切换，只允许激活？因此，如果他们想关闭其中一个选项，他们必须刷新页面并重新开始？太好了！非常感谢。我真的需要拿起一本书或什么的…哈哈。在这种情况下，我会把“divID”改成“divClass”吗

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