Jquery。更改元素位置onclick

我有一個來自jQuery的問題。我想改變div的位置。我有4個div和四個菜單。當我點擊菜單時，我想讓div來到第一位置。這是html代碼：Jquery。更改元素位置onclick

<!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不是很熟悉，我試圖用索引來做，但沒有成功。我怎樣才能做到這一點？

來源

2013-07-26 name

點擊聯繫人時你想要什麼？ –

首先，你必須將你所有的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>

然後，寫一個事件處理這樣的變化，當你在li點擊a發生：

$("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-26 09:53:57 krishgopinath

添加的onclick函數來調用它的jQuery函數，然後添加CSS屬性取決於你需要的位置各<li>。

例如：

<!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-26 09:58:16

工作演示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-26 10:01:41

我想你想這樣的，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-26 10:04:34 yeyene

首先你需要用你所有的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-12 05:16:56 chandanjha

Jquery。更改元素位置onclick

回答

相關問題