<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#ul1 , #ul2{ width:200px; height:200px; border:1px #000 solid; float:left;}

li{ cursor:pointer;}

.active{ background:red;}

input{ float:left; margin-top:100px;}

</style>

<script src="jquery-1.11.1.js"></script>

<script>

$(function(){

	$('li').click(function(){

		$(this).toggleClass('active');

	});

	$('input').click(function(){

		var $formDom = $($(this).attr('form')).find('li[class=active]').css('color','green');

		$formDom.appendTo($($(this).attr('to')));

		$($(this).attr('to')).find('li[class=active]').removeClass('active');

	})

});

</script>

</head>

<body>

<ul id="ul1">

	<li>1111</li>

    <li>2222</li>

    <li>3333</li>

    <li>4444</li>

    <li>5555</li>

</ul>

<input type="button" value="→" form='#ul1' to='#ul2' >

<input type="button" value="←" form='#ul2' to='#ul1'>

<ul id="ul2">

	<li>aaaa</li>

    <li>bbbb</li>

    <li>cccc</li>

    <li>dddd</li>

    <li>eeee</li>

</ul>

</body>

</html>

　　

jq demo 点击选中元素左右移动的更多相关文章

  1. jq实现点击某元素之外触发事件

    <script type="text/javascript"> $(document).bind("click",function(e){ var ...

  2. jq demo 点击弹窗，居中，可滚动，可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jq demo 点击评分组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jq自定义下拉菜单，当用户点击非自身元素（下拉菜单）本身时关闭下拉菜单

    jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...

  5. jq点击改变元素样式、添加类，显示隐藏，图标旋转，再次点击还原；表格点击显示下拉详情

    点击前 点击后 <tr> <td class="right" data-id="{$vo.id}" id="{$vo.id}&quo ...

  6. 用vue2.0实现点击选中active，其他选项互斥的效果

    在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示 ...

  7. 用JQuery动态为选中元素添加/删除类

    在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...

  8. webdriver js点击无法点击的元素

    原文地址https://blog.csdn.net/galen2016/article/details/56847545 [WebDriver]调用JavaScript 一.WebDriver 提供了 ...

  9. [Flex] 组件Tree系列 —— 阻止用户点击选中Tree中分支节点

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:阻止用户点击选中Tree中分支节点 ...

随机推荐

  1. JS构造函数原理与原型

    1.创建对象有以下几种方式: ①.var obj = {}; ②.var obj = new Object(); ③.自定义构造函数,然后使用构造函数创建对象 [构造函数和普通函数的区别:函数名遵循大 ...

  2. （转载）关于管理计算机\\xp1 找不到网络路径的解决方案

    关于管理计算机\\xp1 找不到网络路径的解决方案 使用域管理员登录域控DC,然后打开AD用户和计算机 选择一台域成员计算机,然后选择管理,结果出现如下提示:点击确定后出现如下提示随后,立刻用域管理员 ...

  3. Delphi数据库技术中Disablecontrols和Enablecontrols的功能

    一般来说,用来扫描整个数据库表并修改每个记录的某一个字段的程序如下所示: with Table Do begin DisableControls;{在修改记录的过程中,使其它部件无效} First; ...

  4. C# 调用C++的dll 那些事

    之前从来没搞过C++,最近被安排的任务需要调用C++的接口,对于一个没用过 Dependency 的小白来说,原本以为像平时的Http接口那样,协议,端口一定义,方法参数一写就没事,结果踩了无数的坑. ...

  5. the network could not establish the connection

    为了方便建表等操作,我用sql developer 连接linux 底下的数据库,可连接时出现了这个问题the network could not establish the connection. ...

  6. jquery简易tab切换

    切换tab 使用eq()函数 eq() 方法将匹配元素集缩减值指定 index 上的一个. //为项目 3 设置红色背景 <ul> <li>list item 1</li ...

  7. Python 类的特性讲解

    类的特性讲解 类的特性 #定义一个类, class是定义类的语法,Role是类名, (object)是新式类的写法,必须这样 写,以后再讲为什么 class Role(object): #初始化函数, ...

  8. Python socket粘包解决

    socket粘包: socket 交互send时,连续处理多个send时会出现粘包,soket会把两条send作为一条send强制发送,会粘在一起. send发送会根据recv定义的数值发送一个固定的 ...

  9. CentOS 6.5安装squashfs-tools

    在sourceforge.net网站下载源码包 需要安装的依赖项有zlib-devel.xz-devel.x86_64 修改Makefile文件以支持xz压缩的squashfs文件,去掉Makefil ...

  10. topcoder srm 560 div1

    problem1 link 从大到小贪心,较大的数字应该放置在较浅的位置. problem2 link 最后的位置要么都是整数(经过偶数次变换),要么是$(p.5, q.5)$这种位置(奇数次变换). ...