0

我正在使用 HTML、CSS 和 JavaScript 编写网站。我在一个页面上有两个按钮，它们使用 JavaScript 在单击时显示信息（每个按钮在单击时淡出其他信息以节省空间）。但是相同的代码不适用于我的其他按钮？

JavaScript：

<script type = text/javascript>
$('#scoreButton20102011').click(function() {
    $("#maleRec20102011").fadeIn(1000);
    $("#femaleRec20102011").fadeIn(1000);
    $("#maleRec20112012").fadeOut(1000);
    $("#femaleRec20112012").fadeOut(1000);
});
$('#scoreButton20112012').click(function() {
    $("#maleRec20112012").fadeIn(1000);
    $("#femaleRec20112012").fadeIn(1000);
    $("#maleRec20102011").fadeOut(1000);
    $("#femaleRec20102011").fadeOut(1000);
});​
</script>

2010/11 的按钮显示两个按钮文本，而 2011/12 的按钮使所有内容都淡出？我不明白为什么。

CSS：

#maleRec20112012 {
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    right: 0;
    width: 350px;
    height: 400px;
}

#femaleRec20112012 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}

#maleRec20102011 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}

#femaleRec20102011 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}
4

2 回答 2

0

尝试使用

   <script type = text/javascript>
            $('#scoreButton20102011').live('click',function()
            {
                $("#maleRec20102011").fadeIn(1000);
                $("#femaleRec20102011").fadeIn(1000);
                $("#maleRec20112012").fadeOut(1000);
                $("#femaleRec20112012").fadeOut(1000);                  
            });
            $('#scoreButton20112012').live('click',function()
            {
                $("#maleRec20112012").fadeIn(1000);
                $("#femaleRec20112012").fadeIn(1000);
                $("#maleRec20102011").fadeOut(1000);
                $("#femaleRec20102011").fadeOut(1000);
            });

        </script>

或尝试将代码放在 onready 函数中

于 2012-04-27T20:28:37.620 回答
0

这个简化的 JSFiddle 是否按您的预期工作？http://jsfiddle.net/9JAGK/如果是这样，我猜你的问题实际上是在你的代码中的其他地方。也许检查可能分配给您的按钮或样式的任何其他事件，这些事件可能与淡入/淡出冲突？

于 2012-04-27T20:47:02.910 回答