您的位置：首页 > Web前端 > JQuery

超级简单实现内容的左右移动js+jquery+html

2012-03-21 21:38 731 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style>

#one ,#three{

border:1px dashed #999;

width:100px;

height:300px;

position:relative;

float:left;

}

#two{

border:1px dashed #999;

width:40px;

height:300px;

float:left;}

#three{

float:left;}

select{

overflow:auto;

height:300px;}

</style>

<script language="javascript" src="../jquery帮助/jquery-1.7.1.min.js"></script>

<script language="javascript">

$(document).ready(function (){

$("#inp1").click(function (){

$("#se1 option:selected").appendTo("#shabi");

})

$("#inp").click(function (){

$("#shabi option:selected").appendTo("#se1");

})

})

</script>

<body>

<div id="one">

<select id="se1" multiple="multiple" style="width:80px;">

<option>第1</option>

<option>第2</option>

<option>第3</option>

<option>第4</option>

<option>第5</option>

<option>第6</option>

</select>

</div>

<div id="two">

<input type="button" value="<<" id="inp">

<input type="button" value=">>" id="inp1">

</div>

<div id="three"><select id="shabi" multiple="multiple" style="width:80px;"></select></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航