<!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. DevOps“五宗罪”，这样向DevOps过渡注定会失败

    云计算提供的速度响应.敏捷性和规模效应,契合了如今不断变化的数字商业环境.企业基于最新的IT技术,重构IT架构,加速产品创新和服务交付的速度,从而提高运营效率和市场占有. 不过,企业IT管理者在利用云 ...

  2. Vue系列之 => webpack基础使用

    webpack安装方式 1,运行 npm i webpack -g 全局安装. 2,在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中 项目目录 进入src运行, ...

  3. 杨韬的Python/Jupyter学习笔记

    Python语法学习 https://zhuanlan.zhihu.com/p/24162430 Python 安装库 安装Jupyter Notebook 先安装Python cmd 进入K:\Ju ...

  4. JavaScript判断对象有没有定义

    if ( typeof(callbackfun) != "undefined" ) { callbackfun(); }

  5. hdu5029 Relief grain

    题目链接 树剖+线段树 将区间修改转化为单点修改,因为如果按DFS序进行修改,那么一定会对DFS序更大的点造成影响 #include<iostream> #include<vecto ...

  6. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  7. oracle group by placement可能导致错误结果的bug

    Last week I’ve mentioned on Twitter that we ran into wrong result bug. We found workaround quickly b ...

  8. git的一些补充点

    git rm和 rm的区别 git rm是删除文件, 同时加入到git的跟踪管理中,做一个登记,那么在git commit的时候, 会把这次删除作为一次修改提交上去, 否则, 在 git log中你就 ...

  9. Navicat Premium 12激活

    大自然的搬运工:https://www.jianshu.com/p/5f693b4c9468 声明:本文所提供的所有软件均来自于互联网,个人存放在此作为备用,以备将来不时之需,同时作为大家的分享和学习 ...

  10. P1340 兽径管理

    传送门 思路: 题目要求每次连边都要输出最小生成树的边权和.如果在线直接套用最小生成树模板肯定会超时,考虑离线处理.记录每一插入边的时间,在所有边都插入完成后排序一遍就可以求最小生成树(按照插入时间的 ...