设计前端兼于一身的我,我要吐槽这个设计师了, 竟设计一些为难前端开发的东西,一点都不为我们前端着想。让我做 哼~ 不可能 于是我气冲冲的跑到设计部 大喊一声 哪位是 XXX项目的设计 是哪位设计的 这时只听见一个若若的声音 是我 有什么是嘛?心想:咦~女生 哼 别以为女生我就不敢凶你 我一边 大骂着一边想她走去: 你设计稿设计太......,哇 好呆萌的 女生呀! 睁着大大的眼睛无知的看着我。突然间见蹦出另一个我 完全从买了自己, 瞬间改变了原先的说法:太太完美了 没事 加油 相信你可以的 我走了。。。出门就删了自己浪嘴巴子 让你怂 让你见到美女就妥协.....
哎~事以如此 只能硬着无条件接受了!
言归正传 先说说 设计稿上的实现想法, 这家金融公司 再全国各个省市有 分支 点击不同的 省市内容切换到当前的省市的信息, 设计稿是这样设计的 画了个中国地图 地图上标记 全国的省市 每个省市相当于一个tab。点击 每个省市(tab)下面的内容 就会切换。
于是我就到百度上去查 果然 有很多 一个一个的找 找到个适合本项目的 下载弹出请支付3米币 真让人蛋疼。我这么穷的一个人 怎么可能 给你钱的。一瓶快乐肥仔水呢 不可能 这辈子都不可能。
于是我再网上拼命的找 终于找到个不收费的 于是下载下来 放到项目里 发现里面有个大BUG 那就是 1、点击当前省市 当前高亮状态 加不上去。2、和我当前项目不符合 他没有下拉框 ,在pc上 还行 能点击到 但是到手机端上 那就完全点击不到,我又再次 找到 那位小姐姐和她说了这块的问题。 于是 一致认同 要加快 下拉菜单。
经过我的努力 终于完成了 上面的所有问题。1、分享给大家 虽然里面 还有BUG没有完善 但是可以应对80%以上的项目了。后续我会继续完善, 如果有小伙伴有更好的完善,别忘了与我分享。2、希望我能帮助到更多和我一样在奋斗中的小伙伴 让我们共同学习。
内容:
一、首先 看下拉菜单
1、代码 (html)
2、代码(css)
3、代码(JavaScript)
二、中国地图 (json文件,js文件)
太大 太多
有想要的 可以 私我 发给你
2、调用接口(js)
3、api(js)
此处下拉菜单 不是动态的 而是需要手动添加 进去 只需要在 下拉菜单上加 name="省市名称拼音",即可 后续如有需要的朋友 可私我 在完善进行完善。