jq demo 点击选中元素左右移动
<!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 点击选中元素左右移动的更多相关文章
- jq实现点击某元素之外触发事件
<script type="text/javascript"> $(document).bind("click",function(e){ var ...
- jq demo 点击弹窗，居中，可滚动，可拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq demo 点击评分组件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq自定义下拉菜单，当用户点击非自身元素（下拉菜单）本身时关闭下拉菜单
jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...
- jq点击改变元素样式、添加类，显示隐藏，图标旋转，再次点击还原；表格点击显示下拉详情
点击前 点击后 <tr> <td class="right" data-id="{$vo.id}" id="{$vo.id}&quo ...
- 用vue2.0实现点击选中active，其他选项互斥的效果
在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示 ...
- 用JQuery动态为选中元素添加/删除类
在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...
- webdriver js点击无法点击的元素
原文地址https://blog.csdn.net/galen2016/article/details/56847545 [WebDriver]调用JavaScript 一.WebDriver 提供了 ...
- [Flex] 组件Tree系列 —— 阻止用户点击选中Tree中分支节点
mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:阻止用户点击选中Tree中分支节点 ...
随机推荐
- html5+PHP,websocket无法连接的问题（Call to undefined function socket_create()）
首先是配置文件的问题,打开extension=php_gd2.dll和extension=php_sockets.dll 扩展. 主要注意的是你当前系统使用的php版本和环境变量里面的php版本是否一 ...
- 【js】字符串反转可实现的几种方式
方式1: 这种方式比较简单,推荐使用 字符串转数组,反转数组,数组转字符串. split(""):根据空字符串拆分数组 reverse():数组反转元素位置 join(" ...
- Shiro权限管理框架
一.Shiro介绍 Apache Shiro 是Java 的一个安全框架.Shiro 可以非常容易的开发出足够好的应用,其不仅可以用在JavaSE 环境,也可以用在JavaEE 环境.Shiro 可以 ...
- Docker Kubernetes YAML文件常用指令
YAML文件常用指令 配置文件说明: 定义配置时,指定最新稳定版API(当前为v1). 配置文件应该存储在集群之外的版本控制仓库中.如果需要,可以快速回滚配置.重新创建和恢复. 应该使用YAML格式编 ...
- elastichd安装部署
1.下载 elastichd下载地址:https://github.com/360EntSecGroup-Skylar/ElasticHD/releases或是直接在linux下下载wget http ...
- IP白名单的实现（PHP）
有些项目可能会用到一个IP地址的白名单黑名单之类的验证. 比如,只有IP地址在白名单中,才可以访问该系统. 那么此时,白名单的维护,一般是一个文件,里边是一些IP地址(每行一个IP),当然也有的可能是 ...
- opencv学习之路（26）、轮廓查找与绘制（五）——最小外接矩形
一.简介 二.轮廓最小外接矩形的绘制 #include "opencv2/opencv.hpp" using namespace cv; void main() { //轮廓最小外 ...
- 爆料：2019手游折扣app是真福利还是骗人哪个靠谱？
直接上干货.也许你在找寻,安全的手游折扣App,稳定的手游折扣App,不断续充的折扣App,续充不涨价的折扣App,网上的内容太多,难以分辨.那么看这个可以直接给你答案 1.历史(2004年成立,15 ...
- Win32汇编学习(9)：窗口控件
这次我们将探讨控件,这些控件是我们程序主要的输入输出设备. 理论: WINDOWS 提供了几个预定义的窗口类以方便我们的使用.大多数时间内,我们把它们用在对话框中,所以我们一般就它们叫做子窗口控件.子 ...
- 【NOI 2015】品酒大会
Problem Description 一年一度的"幻影阁夏日品酒大会"隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发"首席品酒家"和" ...