0

div をある側から別の側に移動させたい。メニューをクリックすると、右から div が表示され、次のメニューをクリックすると、この div が左に移動し、新しい div が表示されます。しかし、私はポジションに問題があります。div はページの下部から来て、中央に表示されます。修正方法がわかりません。

これが私のコードです：

索引.html

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.custom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
  <ul>
    <li id= "home"><a href="#">Home</a></li>
    <li id= "about"><a href="#">About</a></li>
    <li id= "products"><a href="#">Products</a></li>
    <li id= "services"><a href="#">Services</a></li>
    <li id= "contact"><a href="#">Contact us</a></li>
  </ul>

  <div id = "newdiv"   style="height:400px; width:700px; background-color:red;    display:none;   margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv1"  style="height:400px; width:700px; background-color:blue;   display:none;   margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv2"  style="height:400px; width:700px; background-color:yellow; display:none;   margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv3"  style="height:400px; width:700px; background-color:green;  display:none;   margin-left:auto; margin-right:auto; "></div>

</body>
</html>

そして、これが私のscript.jsです。

$(document).ready(function(){

    $("#home").click(function() {
         $(".myclass").toggle("slide", { direction: "left" }, 2000).removeClass();
         $("#newdiv").addClass('myclass').toggle("slide", { direction: "right" }, 2000);
    });

    $("#about").click(function() {
        $(".myclass").toggle("slide", { direction: "left" }, 2000).removeClass();
        $("#newdiv1").addClass('myclass').toggle("slide", { direction: "right" }, 2000);
    });

    $("#products").click(function() {
         $(".myclass").toggle("slide", { direction: "left" }, 2000).removeClass();
         $("#newdiv2").addClass('myclass').toggle("slide", { direction: "right" }, 2000);
    });

    $("#services").click(function() {
          $(".myclass").toggle("slide", { direction: "left" }, 2000).removeClass();
          $("#newdiv3").addClass('myclass').toggle("slide", { direction: "right" }, 2000);
    });

});
4

1 に答える 1

1

divで使用position:absoluteします。

お気に入り：

<div id = "newdiv" style=" position:absolute; height:400px; width:700px; background-color:red;    display:none;  position:absolute;  margin-left:auto; margin-right:auto; "></div>

JSFiddle

于 2013-07-26T06:16:58.487 に答える