javascript - Jクエリ。要素の位置を変更 onclick

Question

jQueryから質問があります。div onclick の位置を変更したい。4 つの div と 4 つのメニューがあります。メニューをクリックすると、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;       margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv1"  style="height:400px; width:700px; background-color:blue;      margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv2"  style="height:400px; width:700px; background-color:yellow;    margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv3"  style="height:400px; width:700px; background-color:green;     margin-left:auto; margin-right:auto; "></div>

</body>
</html>

クリックすると、2番目のdivが最初の位置に表示されます。私はjQueryにあまり慣れていません.indexでやろうとしましたが、成功しませんでした. どうやってやるの？

score 2 · Accepted Answer

まず、すべてをdiv要素にラップする必要があります。私はそれを次のように呼びますmainMan:

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

次に、をクリックしたときに変更が発生するように、次のようなイベントハンドラーを記述しaますli。

$("ul").on("click", "li a", function () {
    var index = $(this).parent("li").index();
    $("#mainMan").find("div:eq(" + index + ")").prependTo("#mainMan")
});

トリックは、対応するwithセレクターindexを一致させるために使用し、次にwhich を使用して、選択した要素を前面に移動します。div:eq()prepend

最後に行う必要があるのは、スタイルシートの一般的なスタイルに css スタイルを追加し、bgcolor だけをインラインに保つことです。

<div id="mainMan">
    <div id="newdiv" style=" background-color:red;"></div>
    <div id="newdiv1" style="background-color:blue;"></div>
    <div id="newdiv2" style="background-color:yellow;"></div>
    <div id="newdiv3" style="background-color:green;"></div>
</div>

そしてあなたのCSS：

#mainMan > div {
    height:400px;
    width:700px;
    margin-right:auto;
}

デモ: http://jsfiddle.net/hungerpain/gsMyA/1/

score 0 · Accepted Answer

ワーキングデモhttp://jsfiddle.net/cse_tushar/gsMyA/2/

$("ul").on("click", "li a", function () {
    var index = ($(this).parent("li").index() == 0) ? '': $(this).parent("li").index();
    $("#mainMan").find("#newdiv"+index).prependTo("#mainMan");
});

score 0 · Accepted Answer

まず、すべての div を次のようなセクションにラップする必要があります。

次に、次のjqueryコードでうまくいきます：

$('ul li a').click(function(){
var index = $(this).parent("li").index();
$("#container").find("div:eq(" + index + ")").prependTo("#container") 
});

このメソッドでは、クリックしている 'li' のインデックスを取得し、選択した 'li' のインデックス値を取得する jquery 'eq()'セレクターを使用して、セクション内の同じインデックス div を呼び出します。「prependTo()」は、選択した div をセクションコンテナーの上部に追加します。

score 0 · Accepted Answer

私はあなたがこのようにしたいと思います, DEMO http://jsfiddle.net/yeyene/zsYua/

$('li a').on('click', function () {
    var id = $(this).parent('li').attr('id');
    $('html,body').animate({
        scrollTop: $("div#" + id).offset().top
    },'slow');
});

score 0 · Accepted Answer

jquery 関数を呼び出す各関数に onclick 関数を追加<li>し、必要な位置に応じて css 属性を追加します。

例：

<!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>
    <script>
      function MoveHome(){
          $(this).position='relative';
          //Or you can add any other css attribute
      }
    </script>

  </head>
  <body>
   <ul>
    <li id= "home" onclick="MoveHome"><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;       margin-left:auto; margin-right:auto; "></div>
   <div id = "newdiv1"  style="height:400px; width:700px; background-color:blue;      margin-left:auto; margin-right:auto; "></div>
   <div id = "newdiv2"  style="height:400px; width:700px; background-color:yellow;    margin-left:auto; margin-right:auto; "></div>
   <div id = "newdiv3"  style="height:400px; width:700px; background-color:green;     margin-left:auto; margin-right:auto; "></div>

</body>

javascript - Jクエリ。要素の位置を変更 onclick

5 に答える 5

Related

Reference