Javascript Jquery。单击后更改元素位置_Javascript_Jquery_Html_Indexing

Javascript Jquery。单击后更改元素位置

javascript jquery html indexing

Javascript Jquery。单击后更改元素位置,javascript,jquery,html,indexing,Javascript,Jquery,Html,Indexing,我有一个来自jQuery的问题。我想更改div onclick的位置。我有四个div和四个菜单。当我点击菜单时，我想让div回到第一个位置。这是html代码： <!DOCTYPE html> <html> <head> <title>Untitled</title> <link rel="stylesheet" type="text/css" href="my.css"> <script src="jquery-1.9

我有一个来自jQuery的问题。我想更改div onclick的位置。我有四个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;       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不是很熟悉，我尝试使用索引来实现它，但没有成功。我该怎么做呢？

首先，您必须将所有

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>

$("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>

演示：

将onclick函数添加到调用其jquery函数的每个

，然后根据所需位置添加任何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>


无标题
函数MoveHome（）{
$（this.position='relative'；
//或者您可以添加任何其他css属性
}

工作演示

我想你想要这样，DEMO

首先，您需要将所有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添加到节容器的顶部。

单击contact时需要什么？

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

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

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