2

3 つの div がさまざまなコンテンツで重なり合う単純なページを作成しようとしています。各 DIV 内には、最初に表示された DIV をフェードアウトし、2 番目の DIV を FadeIn するイメージ ([次へ] ボタン) があります。その 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