需求：点击选中左侧内容，把左侧的内容放到右侧的框里面，可以一次放入一个，也可以一次放入多个或者全部，同样，右侧也一样。

写了一个简单的demo，仅供参考：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>穿梭框</title>
        <link rel="stylesheet" href="index.css">
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
        <style>
            ul,
            li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            body {
                background-color: #e3e3e3;
                margin: 0px;
            }
            
            .box {
                width: 300px;
                background-color: #ffffff;
                height: 240px;
                float: left;
            }
            
            .Path {
                color: #ffffff !important;
                background-color: #1890ff !important;
                border-bottom: 1px solid #ffffff;
                transition: all .01s;
            }
            
            .box li {
                padding: 8px;
                border-bottom: 1px solid #ffffff;
                background-color: #f4f4f4;
                cursor: pointer;
                transition: all .5s;
            }
            
            #btn {
                height: 240px;
                float: left;
                width: 80px;
                text-align: center;
            }
            
            #btn button {
                width: 50px;
                height: 30px;
                display: block;
                margin: 20px auto;
                line-height: 30px;
                color: white;
                cursor: pointer;
                background-color: #1890ff;
                border-radius: 5px;
                transition: all .5s;
                border: none;
            }
        </style>
    </head>
    <body>
        <li class="box">
            <ul id="shuttleLeft">
                <li>王小婷1</li>
                <li>王小婷2</li>
                <li>王小婷3</li>
            </ul>
        </li>
        <li id="btn">
            <button id="toRight">></button>
            <button id="toLeft"><</button>
        </li>
        <li class="box">
            <ul id="shuttleRight">
                <li>祈澈菇凉1</li>
                <li>祈澈菇凉2</li>
                <li>祈澈菇凉3</li>
            </ul>
        </li>
    </body>
    <script>
        //穿梭框左侧选中
        $("#shuttleLeft").on('click', 'li', function() {
            if($(this).hasClass('Path')) {
                $(this).removeClass('Path');
            } else {
                $(this).addClass('Path');
            }
        });
        //穿梭框右侧选中
        $("#shuttleRight").on('click', 'li', function() {
            if($(this).hasClass('Path')) {
                $(this).removeClass('Path');
            } else {
                $(this).addClass('Path');
            }
        });
        //向右移动
        $("#toRight").click(function() {
            if($("#shuttleLeft .Path").length == 0) return false;

            $("#shuttleLeft").find('.Path').appendTo("#shuttleRight");
            $("#shuttleRight li").removeClass('Path');
        });
        //向左移动
        $("#toLeft").click(function() {
            if($("#shuttleRight .Path").length == 0) return false;
            $("#shuttleRight .Path").appendTo("#shuttleLeft");
            $("#shuttleLeft li").removeClass('Path');
        });
    </script>
</html>

jQuery实现一个穿梭框_jquery






作者：祈澈姑娘

90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。