您的位置：首页 > Web前端 > JQuery

用jquery做一个列表上下移动和置顶/低

2017-08-24 23:26 666 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>列表上下移动和置顶/低</title>
<script src="js/jquery.min.js"></script>
<style type="text/css">

.active{

background: pink;

}

p {

width: 400px;

}

</style>

</head>

<body>

<div class="herder">

<p>

<span class="nav">黄总</span>

<a href="javascript:;" class="up" javascript:;="">上移</a>

<a href="javascript:;" class="down">下移</a>

<a href="javascript:;" class="top">置顶</a>

<a href="javascript:;" class="bottom">置底</a>

<a href="javascript:;" class="delete">删除</a>

</p>

<p>

<span class="nav">不知火舞</span>

<a href="javascript:;" class="up" javascript:;="">上移</a>

<a href="javascript:;" class="down">下移</a>

<a href="javascript:;" class="top">置顶</a>

<a href="javascript:;" class="bottom">置底</a>

<a href="javascript:;" class="delete">删除</a>

</p>

<p>

<span class="nav">东皇太一</span>

<a href="javascript:;" class="up" javascript:;="">上移</a>

<a href="javascript:;" class="down">下移</a>

<a href="javascript:;" class="top">置顶</a>

<a href="javascript:;" class="bottom">置底</a>

<a href="javascript:;" class="delete">删除</a>

</p>

<p>

<span class="nav">武则天</span>

<a href="javascript:;" class="up" javascript:;="">上移</a>

<a href="javascript:;" class="down">下移</a>

<a href="javascript:;" class="top">置顶</a>

<a href="javascript:;" class="bottom">置底</a>

<a href="javascript:;" class="delete">删除</a>

</p>

</div>

<script type="text/javascript">

$(function () {

//上移

var Up = $(".up");

Up.click(function() {

var a = $(this).parents("p");

a.fadeOut().fadeIn();//消失、出现

a.addClass("active").siblings().removeClass("active");

// //prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

//before() 方法在被选元素前插入指定的内容。

a.prev().before(a);

});

//下移

var Down = $(".down");

Down.click(function() {

var b = $(this).parents("p");//parents()获得当前匹配元素集中每个元素的祖先元素，使用选择器进行筛选

b.fadeOut().fadeIn();//消失、出现

b.addClass("active").siblings().removeClass("active");

b.next().after(b); //after() 方法在被选元素后插入指定的内容。

})

//置顶

var Top = $(".top");

Top.click(function() {

var c = $(this).parents("p");

//fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。// fadeIn() 用于淡入已隐藏的元素。

c.fadeOut().fadeIn(); //消失、出现

c.addClass("active").siblings().removeClass("active");

$("div").prepend(c); //prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。

});

//置底

var Bottom = $(".bottom");

Bottom.click(function() {

var d = $(this).parents("p");

d.fadeOut().fadeIn();//消失、出现

d.addClass("active").siblings().removeClass("active");

$("#main").append(d); //prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。

})

//删除

var Delete = $(".delete");

Delete.click(function() {

var e = $(this).parents("p");

e.fadeOut().fadeIn();//消失、出现

e.addClass("active").siblings().removeClass("active");

e.remove();//隐藏

});

})

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 用jquery做一个列表上下移动和置顶低

相关文章推荐

新的分享

章节导航