<!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. matlab之中文字体乱码处理

  2. SV class

    SV中的class通过new来创建实例,new函数可以传递多个参数: packet P1:  P1 = new:创建一个P1的对象: P2 = P1:P2也指向同一个对象: P2 = new P1:P ...

  3. nginx配置详细解析

    转自 http://blog.csdn.net/zhongguozhichuang/article/details/528168871.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将 ...

  4. 在 python3.x中安装 Crypto 库

    1.安装:直接找过来 whl 安装:链接: https://pan.baidu.com/s/1zXjzchnqc1GgSWT9TjHDaA 提取码: dzbn 复制这段内容后打开百度网盘手机App,操 ...

  5. ansible常用命令大全

    ansible 默认提供了很多模块来供我们使用.在 Linux 中,我们可以通过 ansible-doc -l 命令查看到当前 ansible 都支持哪些模块,通过 ansible-doc  -s   ...

  6. js BOM浏览器对象模型

    BOM即Browser Object Model,浏览器对象模型,表示浏览器窗口,所有js全局对象.函数以及变量均是window 对象的成员. 对于不同的浏览器,表示宽度和高度的方法不同: 对于IE9 ...

  7. Python云图——WordCloud了解一下

    字符可以作画(参考前文:使用记事本画出照片) 字符串一样也可以 安装词云WordCloud. pip install wordcloud 编写要生成词云的内容字符串 保存为txt格式就可以了 使用Py ...

  8. 采用xtrabackup部署主从同步

    1.停掉从库192.168.1.23[root@dev-env23 tmp]# service mysqld stopStopping mysqld: [ OK ] 2.主库全备份cd /opt/xt ...

  9. UnicodeMath数学公式编码_翻译(Unicode Nearly Plain - Text Encoding of Mathematics Version 3)

    目录 完整目录 1. 简介 2. 编码简单数学表达式 2.1 分数 2.2 上标和下标 2.3 空白(空格)字符使用 3. 编码其他数学表达式 3.1 分隔符 强烈推荐本文简明版UnicodeMath ...

  10. Java this关键字 学习笔记

    前言: 这篇博文就是系统的学习一下Java中的this关键字,本人对this关键字的理解知识简单的停留在对  类的成员变量进行赋值,这次所以决定系统的体会一下this 关键字 转自:https://b ...