3条回答 默认 最新
- 妖王令剑 2019-09-30 11:59关注
方法有很多种,我写了两种,你参考一下,看你要那种效果。
<!DOCTYPE html> <html> <head> <title>Untitled Document</title> <script src="jquery.min.js"></script> <style> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } .box { height: 500px; padding: 50px; background: #eee; } .menu { position: relative; overflow: hidden; } .menu li { position: relative; width: 50px; padding: 5px 0; font-size: 14px; line-height: 24px; float: left; text-align: right; list-style: none; cursor: pointer; } .menu li.action { color: #39f; } #liner{ position: absolute; bottom: 0; left: 20px; display: block; width: 20px; height: 2px; background: #39f; transition: all 0.3s; } .menu2 li.action:after{ content: ""; display: block; width: 20px; height: 2px; background: #39f; position: absolute; right: 0; bottom: 0; } </style> <script> $(function(){ // 第一种 $(".menu1").on("click","li",function(){ var index = $(this).index(); var wh = $(this)[0].offsetWidth; var offsetLeft = $(this)[0].offsetLeft; var linerWH = $("#liner")[0].offsetWidth; var left = wh + offsetLeft - linerWH; $("#liner").css('left',left); $(this).siblings("li").removeClass('action'); $(this).addClass("action"); }) $(".menu1 li").eq(0).click(); // 第二种 $(".menu2").on("click","li",function(){ var index = $(this).index(); $(this).siblings("li").removeClass('action'); $(this).addClass("action"); }) $(".menu2 li").eq(0).click(); }) </script> </head> <body> <div class="box"> <h2>第一种: </h2> <ul class="menu menu1"> <li class="action">div1</li> <li>div2</li> <li>div3</li> <li>div4</li> <label id="liner"></label> </ul> <h2>第二种: </h2> <ul class="menu menu2"> <li class="action">div1</li> <li>div2</li> <li>div3</li> <li>div4</li> </ul> </div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 请教一下各位,为什么我这个没有实现模拟点击
- ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
- ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
- ¥20 有关区间dp的问题求解
- ¥15 多电路系统共用电源的串扰问题
- ¥15 slam rangenet++配置
- ¥15 有没有研究水声通信方面的帮我改俩matlab代码
- ¥15 ubuntu子系统密码忘记
- ¥15 保护模式-系统加载-段寄存器
- ¥15 电脑桌面设定一个区域禁止鼠标操作