htmlbu部分:
<div class="box">
<p>首页1
<button class="moveup">点击上移</button>
<button class="movedown">点击下移</button>
</p>
<p>详情2
<button class="moveup">点击上移</button>
<button class="movedown">点击下移</button>
</p>
<p>内容3
<button class="moveup">点击上移</button>
<button class="movedown">点击下移</button>
</p>
<p>中心4
<button class="moveup">点击上移</button>
<button class="movedown">点击下移</button>
</p>
</div>
css部分
.box{
width: 80%;
height: 380px;
border: 2px solid pink;
}
.box p{
width: calc(80% - 20px);
height: 80px;
margin: 2px auto;
background-color: yellowgreen;
}
.box p:nth-child(2n){
background-color: pink;
}
.box p .moveup{
width: 100px;
height: 40px;
border: none;
color: #fff;
border-radius: 8px;
margin-left: calc(60% - 20px);
margin-top: 20px;
font-size: 14px;
background-color: #3b8cbd;
}
.box p .movedown{
width: 100px;
height: 40px;
border: none;
color: #fff;
border-radius: 8px;
font-size: 14px;
background-color: #3b8cbd;
}
js部分
<script src="./jquery.min.js"></script>//项目在要引入Jquery
<script>
//上移方法
$('.moveup').click(function (e) {
let dom=$(e.target).parent()
if(dom.prev().length==0){
alert('已经是顶层了,无法移动了')
return
}else{
dom.prev().insertAfter(dom);
}
})
//下移方法
$('.movedown').click(function (e) {
let dom=$(e.target).parent()
if(dom.next().length==0){
alert('已经是底层了,无法移动了')
return
}else{
dom.next().insertBefore(dom);
}
})
</script>
实现效果(样式随便写的,有点丑):