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中分支节点 ...
随机推荐
- Gitlab安装以及汉化
Gitlab安装以及汉化 系统环境: CentOS 7.5 IP:192.168.1.2 关闭selinux.firewalld gitlab-ce-10.8.4 rpm包:下载地址 一.下载并安装g ...
- Docker 基础 (一)
为什么要使用 Docker? 作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具有众多的优势.首先,Docker 容器的启动可以在秒级实现,这相比传统的虚拟机方式要快得多. 其次,Doc ...
- Linux+Jenkins环境搭建
一.安装基础环境 1. yum -y install java-1.8.0-openjdk.x86_64 #安装1.8jdk 2. 查看java 版本 [root@localhost djanggo_ ...
- 51Nod 博弈模板题
连刷3道博弈模板题,算是稍微学习了以下三个经典博弈了.推荐一个博客. 第一道模板:Bash博弈——同余理论 1066 Bash游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度 ...
- Dart编程语言入门
Dart基础入门语法介绍,详细说明可以查看相关视频<Dart编程语言入门>. 变量与常量 变量 1.使用 var 声明变量,默认值为 null var a;//null a = 10; 2 ...
- Python Gevent协程自动切换IO
Gevent Gevent 是一个第三方库,可以轻松通过gevent实现并发同步或异步编程,在gevent中用到的主要模式是Greenlet, 它是以C扩展模块形式接入Python的轻量级协程. Gr ...
- 剑指offer（18）二叉树的镜像
题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ / \ ...
- ERROR 1130 (HY000): Host '172.16.1.54' is not allowed to connect to this MySQL server
centos7.5 远程连接数据库报错 问题: [root@db04-54 ~]# mysql -urep -p123 -h172.16.1.51 Warning: Using a password ...
- 【Git】Git使用记录: 撤回已经commit到本地的提交记录
话不多说直接上步骤: git bash直接干到你的code. 直接敲命令: git reset --soft HEAD~1 搞定 就是这么简单粗暴. 如有顾虑请自行找个案例测试即可. 参考资料 htt ...
- 解决github访问及上传慢的问题
在本地host文件中添加映射 http://tool.chinaz.com/dns , 查询 github.global.ssl.fastly.net 和 assets-cdn.github.com ...