javascript - 如何使用链接或复选框切换内容集-6ren

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

转载作者：太空宇宙更新时间：2023-11-03 18:00:53

所以我想在我的页面中添加一个功能，允许用户只切换他们想要的信息的可见性，在几组中，但这些信息相互穿插。我一开始是按照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; }

这对于只有一个实例的实例来说效果很好，但对于“黄金”实例，它只会切换第一个带有 id 的 div。然后我试图从 this post 中收集信息和 this post ，但最终未能令我满意。

第一篇文章适用于同一组的多个实例，但我不够聪明，无法在不将脚本复制四次的情况下使其适用于多个不同组的多个实例。非常感谢您的建议，谢谢!

最佳答案

试试这个:

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

更新

删除: