jQuery - 显示 div

Question

我正在创建一个成员的个人资料页面。成员的名字是他们的生物 id 的链接。期望的结果是，当每个人的姓名被点击时，他们的简历详细信息会出现在页面上特定的 css 样式框中。页面加载时框的背景和边框可见，但没有内容。单击另一个名称时，以前的简历将返回隐藏，而当前的简历将更改为显示。对此新手可能没有一个简单的答案。

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

链接和框的样式部分的 css：

#bios {background:#FFFFCC; border-style:solid; border-color:#ffd119; padding:15px; width:600px;text-align:left;position:absolute; top:200px;left:20px;}
.show {display:block; width:600px;}
.hide {display:none;}
.biopic {float:left; margin-right:15px; width:200px; height:200px; border-style:solid; border-color:#000099;clear:left;}
.biostext {display:inline; margin-left:15px; font-family:Georgia, serif; clear:right;}
#bioLinks {float:left; display:block; font-family:Georgia, serif;  margin-left:25px; margin-top:15px;clear:right;}
a {font-family:Georgia,serif; color:#0000ff; text-decoration:none;}

链接本身，虽然实际上会有几十个：

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

还有个人简介，但出于隐私考虑，照片已被删除：

<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 中测试我的代码时，加载时会显示空框，但单击链接不会产生任何结果。

Answer 1

Working Fiddle

我相信您的问题是语法问题。你不应该双重绑定$(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 的结束注释是--> 而不是--!>

Answer 2

你可以试试这个

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

DEMO.