<!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. Hbase 读写 原理

    客户端读取信息流程 ()client要读取信息,先查询下client 端的cache中是否存在数据,如果存在,刚直接返回数据.如果不存在,则进入到zookeeper,查找到里面的相应数据存在的Root ...

  2. ServletContext详解(转)

    ServletContext,是一个全局的储存信息的空间,服务器开始,其就存在,服务器关闭,其才释放.request,一个用户可有多个:session,一个用户一个:而servletContext,所 ...

  3. linux进程虚拟地址空间

    转载源 在多任务操作系统中,每个进程都运行在属于自己的内存沙盘中.这个沙盘就是虚拟地址空间(Virtual Address Space),在32位模式下它是一个4GB的内存地址块.在Linux系统中, ...

  4. js cookie缓存处理

    function setCookie(cnameList,cvalueList,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*2 ...

  5. 用java 集合和映射实现文章的单词数目统计

    package 一_统计字母出现; import java.io.File; import java.io.FileNotFoundException; import java.util.HashMa ...

  6. 51nod1432贪心

    n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...

  7. springmvc多个视图解析器

    <property name="viewResolvers"> <list><!-- 多个视图解析器 --> <bean class=&q ...

  8. UVA1329 Corporative Network

    思路 用带权并查集维护到根的距离即可 代码 #include <cstdio> #include <algorithm> #include <cstring> #i ...

  9. vue+vux scrollTop无法实现定位到具体dom

    先看一下最终的运行效果. 项目背景介绍:技术栈: vue+vux+nodejs需求:对汽车品牌列表可以按照字母进行索引定位 在开发中实现这种需求,心想还不是小菜一碟,作为一个饱经bug的程序员,别的我 ...

  10. 4th，Python三级菜单

    1. 运行程序输出第一级菜单 2. 选择一级菜单某项,输出二级菜单,同理输出三级菜单 3. 菜单数据保存在文件中 4. 让用户选择是否要退出 5. 有返回上一级菜单的功能 data = { '北京': ...