Hello. Here i want to saw code for arrange div.
Suppose there are 5 div. All are arranged. When u click on third div, it will come to first position.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".item-post").click(function() {
$('.news-layout-1').prepend($(this));
});
});
</script>
<style type="text/css">
h1 { cursor: pointer }
</style>
</head>
<body>
<div class="news-layout-1">
<div class="item-post"><h1 class="item-title">First One</h1></div>
<div class="item-post"><h1 class="item-title">Second One</h1></div>
<div class="item-post"><h1 class="item-title">Third One</h1></div>
<div class="item-post"><h1 class="item-title">Fourth One</h1></div>
<div class="item-post"><h1 class="item-title">Fifth One</h1></div>
</div>
</body>
</html>
Suppose there are 5 div. All are arranged. When u click on third div, it will come to first position.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".item-post").click(function() {
$('.news-layout-1').prepend($(this));
});
});
</script>
<style type="text/css">
h1 { cursor: pointer }
</style>
</head>
<body>
<div class="news-layout-1">
<div class="item-post"><h1 class="item-title">First One</h1></div>
<div class="item-post"><h1 class="item-title">Second One</h1></div>
<div class="item-post"><h1 class="item-title">Third One</h1></div>
<div class="item-post"><h1 class="item-title">Fourth One</h1></div>
<div class="item-post"><h1 class="item-title">Fifth One</h1></div>
</div>
</body>
</html>
No comments:
Post a Comment