使用js实现上移、下移、置顶、置底功能及源码案例
2016-05-11 22:18
896 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>使用js实现上移、下移、置顶、置底功能及源码案例</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="jquery-1.8.2.min.js"></script> <style> .demo li{line-height: 30px;border-bottom: 1px solid #000;} .demo li a{padding: 0 20px;} </style> </head> <body> <ul class="demo"> <li>001 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li> <li>002 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li> <li>003 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li> <li>004 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li> </ul> <script> $(".demo").on('click', 'a', function(event) { event.preventDefault; var parent=$(this).parent(); var parents=$(this).parents(".demo"); var len=parents.children().length; if(($(this).is(".up") || $(this).is(".top")) && parent.index()==0){ alert("已经置顶!"); return false; }else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index()==len-1){ alert("已经置底!"); return false; } switch (true) { case $(this).is(".up"): var prev = parent.prev(); parent.insertBefore(prev); break; case $(this).is(".down"): var next = parent.next(); parent.insertAfter(next); break; case $(this).is(".top"): parents.prepend(parent); break; case $(this).is(".bottom"): parents.append(parent); break; } alert("操作完成!!"); }); </script> </body> </html>
实际效果如下图
相关文章推荐
- 如何用js得到当前页面的url信息方法(JS获取当前网址信息)
- 创建 jsp 时,网页出现莫名错误
- json与jsonp的区别
- 移动设备、手机浏览器Javascript滑动事件代码
- js--笔试题2
- javascript 学习小结 JS装逼技巧(一) by FungLeo
- seaJS 使用随笔
- Jsp账户登录的实现
- js判断页面图片是否存在,并设置默认值
- JavaScript:用JS实现加载页面前弹出模态框
- js操作关闭子页面刷新父页面
- Javascript基础知识盲点总结——数据类型和数组
- Javascript:谈谈JS的全局变量跟局部变量
- JavaScript(select onchange)的网页跳转的简单实现
- Ext JS 初识
- javascript -function- 函数从基本到闭包详解
- JavaScript事件委托的技术原理
- 主流JS框架中DOMReady事件的实现
- fastjson封装
- js获取当前日期