xl1090453281 2019-05-06 17:03 采纳率: 100%
浏览 1112
已采纳

js+css怎么实现点击改变div的位置

不点击字母时布局如图1,点击后出现城市,然后点击的字母所在行上移到顶,如果点第二行的字母就两行上移,第三行的字母就三行上移,麻烦提供一下代码,十分感谢!图片说明图片说明

  • 写回答

3条回答 默认 最新

  • 熙決 2019-05-07 09:12
    关注
    <!DOCTYPE html>
    <html>
    
    <head>
        <title></title>
        <meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <style type="text/css">
            body {margin: 0;padding: 0}
            .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
            .all {height: 100vh;background: #273385;}
            .words {position: absolute;width: 100%;bottom: 0;}
            .words ul {list-style: none;margin: 0;clear: both;padding: 0;zoom: 1;}
            .words ul li {float: left;height: 40px;text-align: center;width: 16.6666666%;line-height: 40px;margin: 5px 0;}
            .words ul li a {display: block;height: 100%;width: 40px;margin: 0 auto;background: rgba(90, 79, 180, 0.5);color: #a3a2fe;border-radius: 50%;}
            .select {width: 100%;height: calc(100vh - 275px);overflow-y: scroll;}
            .select ul li {float: none;width: 100%;}
            .select ul li a {border-radius: 0;width: 92%;text-align: left;color: #fff;background: none;border-bottom: 1px solid #5251cc;}
            .search {position: fixed;display: block;width: 85%;left: 0;right: 0;margin: auto;top: 10px;height: 35px;border-radius: 20px;border: none;padding-left: 15px;background: rgba(68, 119, 255, 0.5);color: #fff;}
            .words ul li a.active{background: #315cf6;}
        </style>
    </head>
    
    <body>
        <div class="all">
            <input type="text" placeholder="搜索城市" name="" class="search">
            <div class="words clearfix">
                <div class="item">
                    <ul class="clearfix">
                        <li><a>A</a></li>
                        <li><a>B</a></li>
                        <li><a>C</a></li>
                        <li><a>D</a></li>
                        <li><a>E</a></li>
                        <li><a>F</a></li>
                    </ul>
                </div>
                <div class="item">
                    <ul class="clearfix">
                        <li><a>G</a></li>
                        <li><a>H</a></li>
                        <li><a>J</a></li>
                        <li><a>K</a></li>
                        <li><a>L</a></li>
                        <li><a>M</a></li>
                    </ul>
                </div>
                <div class="item">
                    <ul class="clearfix">
                        <li><a>N</a></li>
                        <li><a>O</a></li>
                        <li><a>P</a></li>
                        <li><a>Q</a></li>
                        <li><a>R</a></li>
                        <li><a>S</a></li>
                    </ul>
                </div>
                <div class="item">
                    <ul class="clearfix">
                        <li><a>T</a></li>
                        <li><a>X</a></li>
                        <li><a>Y</a></li>
                        <li><a>Z</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
    $('.item .clearfix li').click(function() {
        let str = `
                    <div class="select">
                        <ul>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                            <li><a>${Math.random() * 100 + 50}</a></li>
                        </ul>
                    </div>
            `;
        let div = $(this).parents('.item');
        $(this).siblings().children('a').removeClass('active');
        div.siblings().find('a').removeClass('active');
        $(this).children('a').addClass('active');
        div.children('.select').remove();
        div.siblings().children('.select').remove();
        div.append(str);
    });
    </script>
    
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名