基于jquery的超简单上下翻

代码如下:

<html>
<head>
<title>超简单上下翻</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
简单上下翻，函数
<script type="text/javascript">
function UpDown(What) {
var aList = $("#tab a");
var oldnode = aList.get(0);
/*
*获取最后一个元素三种方法
*/
newnode = aList[aList.length - 1];
newnode = aList.get(aList.length - 1);
newnode = $("#tab a:last");
if (What == "up") return $(oldnode).before(newnode);
$(newnode).after(oldnode)
}
</script>
<div id="tab">
<a href='#'> a </a><a href='#'> b </a><a href='#'> c </a><a href='#'> d </a><a href='#'> e </a><a href='#'> f </a></div>
<a href='#' onclick="UpDown('up')">上一个</a>
<a href='#' onclick="UpDown()">下一个</a>
</body>
</html>

赞 (0)

相关推荐

  • 基于jquery的超简单上下翻

    复制代码 代码如下: <html> <head> <title>超简单上下翻</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> 简单上下翻,函数 <script type="text/javascript"> function

  • JS/jQuery实现超简单的Table表格添加,删除行功能示例

    本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能.分享给大家供大家参考,具体如下: 最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的是代码,大家觉得可以,记得点赞哦!!!谢谢! 需要的拿去,转载请在明显的位置标注出出处!!! <html> <head> <title>table添加/删除行</title> </head> <body> <t

  • 基于jQuery的实现简单的分页控件

    基于jQuery的实现简单的分页控件

    1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla

  • 基于JQuery的一个简单的鼠标跟随提示效果

    基于JQuery的一个简单的鼠标跟随提示效果

    1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

  • jquery实现超简单的瀑布流布局【推荐】

    jquery实现超简单的瀑布流布局【推荐】

    1.看看效果吧! 2.html代码index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margi

  • EasySlider 基于jQuery功能强大简单易用的滑动门插件

    EasySlider 基于jQuery功能强大简单易用的滑动门插件

    Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.所以,基本上你只需要链接这个插件文件后,设置好内容,然后样式化CSS就可以了.EasySlider的功能 支持横向或纵向滑动 支持自动滚动 支持连续滑动 "上一屏"和"下一屏按钮" "到第一屏"和"最后一屏"按钮 隐藏的控制 可选的控制按钮包围标记 同一页面可支持多个滑动门 可设置

  • 基于jquery的一个简单的脚本验证插件

    主要用到了jquery,以及自定义的一个属性wl_check,属性说明如下: 1.语法 [need:true,type:int,maxlen:15,minlen:2] 2.关键字 need:文本输入框的必填限制 regtype:文本输入框的正则表达式类别验证 minlen:文本输入框的最小输入长度 maxlen:文本输入框的最大输入长度 minval:数字型文本输入框的最值 maxval:数字型文本输入框的最值 notval:下拉框的必选设置 minselect:单复选框的最少选项数 maxse

  • 基于jquery的实现简单的表格中增加或删除下一行

    代码如下: html 复制代码 代码如下: <div> <table> <tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><

  • 基于jquery实现最简单的选项卡切换效果

    基于jquery实现最简单的选项卡切换效果

    这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. 代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh

  • jquery之超简单的div显示和隐藏特效demo(分享)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

随机推荐