2

我正在尝试创建一个简单的页面，其中 3 个 div 与各种内容相互重叠。每个 DIV 中都有一个图像（一个 NEXT 按钮），它应该淡出最初显示的 DIV，并淡入第二个 DIV。在第 2 个 DIV 内，是另一个 FadeOut DIV 2 和 FadeIn DIV 3 的 NEXT 按钮。

我在隐藏之前显示的 DIV 时遇到了问题，并且所有 3 个最终都将所有内容都显示在彼此之上。

请帮忙：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>

<style>
div {
width:80px; 
display:none;
height:80px; 
z-index : 1;
position: fixed; 
top: 20px; 
left: 20px; 
}

div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }


form {
    border: thick solid #1D4600;
        height: 500px;
}
</style>
</head>

<body>
<form>
    <div id="one" style="display:inline !important">
<input type="text" name="textfield" id="textfield" />
<img src="test.gif" width="95" height="72" class="nextlink"></div>

    <div id="two"><a href="#">link2</a>
<img src="test.gif" width="95" height="72" class="nextlink">
<input type="text" name="textfield" id="textfield" />
</div>

    <div id="three">Other text</div>
</form>

<script>
  $("img.nextlink").click(function(event) {
  $("div:hidden:first").fadeIn("slow");
 });
</script>


</body>
</html>
4

1 回答 1

1

也许是这样的？代码可以用来清理，但这应该让你有一个好的开始

$("div:first").show();

$("img.nextlink").click(function(event) {
   $(this).parent().hide();
    if ($(this).parent().next("div").length == 0) {
        $("#one").fadeIn("slow");
    }
    else
    {
        $(this).parent().next("div").fadeIn("slow");
    }
});

演示：http: //jsfiddle.net/CK9H8/

于 2013-04-12T02:25:19.007 回答