Javascript jQuery-显示div fro

我正在创建一个成员个人资料页面。成员的姓名是指向其个人简历id的链接。期望的结果是，当单击每个人的姓名时，他们的个人简历详细信息将显示在页面上特定的css样式框中。加载页面时，框的背景和边框可见，但没有内容。单击其他名称时，上一个bio将返回隐藏，而当前bio将更改为显示。对于这个问题，可能有一个简单的答案，这个新手就是不明白

    <script type="text/javascript">
$(document).ready(function() {
         $(document).ready(function() {
            $("#bioLinks div a").click(function(){  
                $("#bios .show").removeClass("show").addClass("hide");
                var bio = $("#bios ." + $(this).attr("id"));
                bio.removeClass("hide");
                bio.addClass("show");
                })
        });
</script>

链接本身，尽管实际上会有几十个：

<div id="bioLinks">
  <div><a href id="bio1">Joe Bloggs</a></div>
  <div><a href id="bio2">Monica Faux</a></div>
  <div><a href id="bio3">John Doe</a></div>
</div>

和bios本身，但为了隐私，删除了照片：

<div id="bios">
        <div class="bio1 hide">
            <!--div class="biopic"><img src="http://www. -- snip--.jpg" width="200" height="200" alt="Joe Bloggs"-->
            <!--/div-->
            <div class="biostext">Joe Bloggs is just like everybody else.
            </div>
        </div>
        <div class="bio2 hide">
            <!--div class="biopic"><img src="http://www. -- snip--.jpg" width="200" height="200" alt="Monica Faux"-->
            <!--/div-->
            <div class="biostext">Monica Faux is a belle with a shady past.</div>
         </div>
         <div class="bio3 hide">
            <!--div class="biopic"><img src="http://www. -- snip--.jpg" width="200" height="200" alt="John Doe"-->
            <!--/div-->
            <div class="biostext">John Doe is an unknown in the organisation.
            </div>
         </div>
</div>

乔·布洛格斯和其他人一样。
莫妮卡·福克斯是个有着阴暗过去的美女。
约翰·多伊在这个组织里是个默默无闻的人。

当我在Chrome和IE中测试代码时，空框会在加载时显示，但单击链接不会产生任何结果

我相信你的问题是句法上的。您不应该是双重绑定的

$（document）.ready（）

，而且看起来在任何情况下都比所需的结束括号少一个

将javascript更改为

$(document).ready(function () {
    $("#bioLinks div a").click(function () {
        $("#bios .show").removeClass("show").addClass("hide");
        var bio = $("#bios ." + $(this).attr("id"));
        bio.removeClass("hide");
        bio.addClass("show");
    })
});

看看这是否解决了问题

另一方面，您使用了不正确的注释HTML的方法。HTML的结束语是

-->

而不是

-->
您可以试试这个

$("#bioLinks div a").click(function () {
    $("#bios > div").removeClass("hide").hide();
    var bio = $("#bios ." + $(this).attr("id"));
    bio.show();
});

您能创建一个JSFIDLE吗？另外，在您的示例中，所有HTML都被注释掉了。这是一个错误吗？不确定如何创建JSFIDLE？所有的html都不是mean tot注释掉的，只有img src divs？W3学校验证程序试图提供帮助，但我太无知了，不知道这意味着什么：错误行85，第16列：“HREF”不是为任何属性指定的组的成员，我仍然不明白为什么相同的代码在这些小提琴中工作，而不是在页面上。我已经试着将一个页面剥离到小提琴中显示的代码中，但也无法实现。在IE中，链接甚至不显示为链接，光标保持为I-bar。哎呀，感谢您对注释的澄清，当我回到带有文件的系统时，我将尝试您的更改。你说得对，这看起来像是我工作文件中的剪切粘贴错误。唉，还是没什么。但这两种解决方案在我的页面上都不起作用，因此我怀疑错误在其他地方。不过，谢谢你那双新鲜的眼睛！请看我对上面Sheikh Heera的回答，如果我正确地认为fiddle用红色标记了错误代码，那么为什么我的任何css属性都这样标记？如果您的演示即使使用红色代码，也不会出现致命错误？不确定为什么会突出显示CSS值。它们可能不符合W3标准，即使浏览器可以解析它们。修复标记的问题很重要，因为某些浏览器会以不同于其他浏览器的方式处理缺少的关闭标记和属性。这看起来很有趣，我现在无法尝试，但这对非顺序单击的用户仍然有效吗？是的，可以，检查演示。嗯，在演示中效果非常好，但在我的页面上一点也没有，所以我想脚本不是问题所在。不过，谢谢你，一个提出更多问题的答案仍然是一个答案。我编辑这篇文章是为了去除生物文本中的无关内容（p），这是以前尝试的遗留。这就把我的红色提琴头清理干净了。我以前从未使用过这种（非常方便的btw）小提琴，但它看起来像是用红色标记了错误代码。那么为什么小提琴演示会将我的href id=“bio1”等标记为红色？我的几个css属性也被标记为红色，但我看不到它们有任何问题？我已经注意到我引用了jQuery 1.something-against，并且已经更新为使用1.9.1，就像您在小提琴中使用的一样，但没有成功。
$("#bioLinks div a").click(function () {
    $("#bios > div").removeClass("hide").hide();
    var bio = $("#bios ." + $(this).attr("id"));
    bio.show();
});