不点击字母时布局如图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条)
报告相同问题?
提交
相关推荐 更多相似问题
- 2019-05-06 17:03回答 3 已采纳 ```
- 2019-04-29 16:55回答 4 已采纳 http://www.jq22.com/jquery-info20579 http://www.jq22.com/jquery-info20349
- 2021-11-03 19:03回答 4 已采纳 浏览器的vertical-align的默认值为baseline,有内容后会导致对齐变化,有3种解决办法第一个方法设置vertical-align为top第二个方法是设置overflow设置为hidde
- 2020-10-22 21:48主要介绍了JS+CSS实现DIV层的展开、收缩效果,以两个完整实例介绍了JS控制DIV层的展开、收缩效果,感兴趣的小伙伴们可以参考一下
- 2020-12-11 09:18本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:<html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> [removed]...
- 2020-10-22 15:54主要介绍了JS+CSS实现鼠标经过弹出一个DIV框的实现方法,带缓冲渐变动画效果,涉及鼠标事件的响应及结合时间函数定时触发形成动画渐变效果的相关技巧,需要的朋友可以参考下
- 2021-06-22 20:08回答 1 已采纳 很多东西,哪里思路不会?可以把具体不会的地方,说出来,可以给你分析
- 2021-09-15 21:37回答 1 已采纳 书本翻页效果 html+css_北极光之夜。-CSDN博客 效果:有些细节没处理好 (“▔□▔)实现:定义标签,shu是书本,feng是封
- 2018-11-18 14:25回答 3 已采纳 https://download.csdn.net/download/jackson23333/10146534
- 2019-12-17 14:18这是一套完整的web前端旅游页面, 一共7个页面, 并且在登录、注册时具有js表单校验, 页面之间实现了跳转。
- 2020-10-22 14:39主要介绍了JS+CSS实现闪烁字体效果代码,可实现文字按照指定颜色逐次闪烁显示的功能,代码非常简单实用,需要的朋友可以参考下
- 2018-08-13 13:37只要你是学习或者做前端开发的,肯定需要,几百种前端实例,帮助你轻松实现各种漂亮的组件! 一、J Query实例大全 1)AjaxJavaScript资源 1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形...
- 2021-12-05 16:22回答 2 已采纳 你看一下,用.div3.div2 或者 .div3+.div2都行,关键是在html部分,要把div2放div3下面!第一种:+ 相邻兄弟选择器(.div3 .div2)只能选择与自己紧紧相连的身
- 2022-04-19 11:20回答 2 已采纳 const emailMouseLeave = useCallback((changeIndex)=>{ let result = email.concat() resul
- 2018-09-14 16:15回答 1 已采纳 先隐藏其他的,显示第一项,点击按钮检查成功显示下一项就行了,其他类似
- 2021-01-22 15:31十天学会HTML+DIV+CSS WEB前端教程.zip
- 2015-12-31 17:23html javascript+css实现div自由布局
- 2020-12-11 19:53本文实例讲述了js操作css属性实现div层展开关闭效果的方法。分享给大家供大家参考。具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象...
- 2019-05-06 18:05回答 6 已采纳 div里再放一个div 或者用:before伪元素。 也可以css3的渐变色背景
- 2020-09-07 17:18陆海潘江小C的博客 购书+阅读静态网页设计与实现,纯HTML+CSS+Javascript,基本实现网站经典功能:图片轮播切换、点击切换、表单登录验证、用户浏览网站时长计算、鼠标点击提示、加载提示,体验前端开发的过程,小白入门前端开发案例...
- 没有解决我的问题, 去提问