一个简单的jquery左右列表内容切换应用

Posted 法克大叔叔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单的jquery左右列表内容切换应用相关的知识,希望对你有一定的参考价值。

选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同。

html代码:

 1 <div id="main">
 2     <div id="left">
 3         <div id="select1" class="sel">
 4             <span>apple</span>
 5             <span>huawei</span>
 6             <span>htc</span>
 7             <span>samsung</span>
 8         </div>
 9         <button id="add" value="选中添加">选中添加</button><br>
10         <button id="add_all" value="选中全部">选中全部</button>
11     </div>
12     <div id="right">
13         <div id="select2" class="sel">
14             
15         </div>
16         <button id="remove" value="移除添加">移除添加</button><br>
17         <button id="remove_all" value="移除全部">移除全部</button>
18     </div>
19 </div>

css:

 1 <style type="text/css">
 2         .sel{
 3             width: 100px;
 4             height: 160px;
 5             border:1px solid black;
 6         }
 7         span{
 8             display: block;
 9         }
10         #left,#right{
11             float: left;
12             border:1px solid black;
13             margin-right: 20px;
14         }
15         .light{
16             background-color: blue;
17         }
18     </style>

jquery:

 1 <script type="text/javascript">
 2     $(\'span\').click(function(){
 3         $(this).addClass("light").siblings().removeClass("light"); //当点击span标签时为它添加高亮样式light,并移除除选中项外的其他同级标签的light属性;
 4     });
 5     $("#add").click(function(){
 6         var options=$("#select1>.light");//获取选中项;
 7         options.removeClass("light").appendTo("#select2"); //将该span标签的light属性移除并移到右边;
 8 
 9     });
10     $("#add_all").click(function(){
11         var options=$("#select1 span");
12         options.appendTo("#select2");
13     });
14     $("#remove").click(function(){
15         var options=$(".light");
16         options.removeClass("light").appendTo("#select1");
17     });
18     $("#remove_all").click(function(){
19         var options=$("#select2 span");
20         options.appendTo("#select1");
21     });
22 </script>

 

以上是关于一个简单的jquery左右列表内容切换应用的主要内容,如果未能解决你的问题,请参考以下文章

贡献一下多年珍藏的特效例子

jQuery应用实例4:下拉列表

html怎么在一张网页上出现一个列表,列表内有几项,单机切换内容,并不跳转到另一个网页。

利用下拉框的方法进行txt列表中内容的左右切换

Mediaplayer在切换片段时没有暂停

怎么样才能让div里的内容轮播 就想普通的banner图那样 由左右箭头切换啊