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>

现在当我点击时，我想第二个div出现在第一个位置。我对jQuery不是很熟悉，我试着用索引来做，但没有成功。我怎么能这样做？

Answer 1

首先，您必须将所有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")
});

诀窍是使用index将相应的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/

Answer 2

向每个调用其jquery函数的<li>添加onclick函数，然后添加任何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>

Answer 3

工作演示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");
});

Answer 4

我想你想这样，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');
});

Answer 5

首先，您需要将所有div包装成以下部分：

然后遵循jquery代码就可以了：

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

在这个方法中，我们得到我们点击的'li'的索引，然后使用jquery 'eq（）'选择器调用该部分内的相同索引div，该选择器获取索引值所选的'li'。 'prependTo（）'会将选定的div添加到section容器的顶部。

jQuery的。更改元素位置onclick

5 个答案: