0

我有一个来自 jQuery 的问题。我想改变 div onclick 的位置。我有 4 个 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不是很熟悉，我尝试用索引来做，但没有成功。我怎样才能做到这一点？

4

5 回答 5

2

首先，您必须将所有内容包装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/

于 2013-07-26T09:53:57.690 回答
0

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

于 2015-03-12T05:16:56.457 回答
0

我想你想要这样，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');
});
于 2013-07-26T10:04:34.157 回答
0

将 onclick 函数添加到每个<li>调用其 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>

于 2013-07-26T09:58:16.413 回答
0

工作演示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");
});
于 2013-07-26T10:01:41.663 回答