Question

我正在创建一个会员＆＃39;个人资料页。会员＆＃39;名字是他们的生物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>

链接和框的样式部分的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>

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

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.

jQuery - 显示div

2 个答案: