itanℒ 2019-09-30 11:26 采纳率: 64.1%
浏览 2817
已采纳

关于css设置底部横线...

图片说明

这个小短线我是用div做的 但是现在可以横向滑动，这个方法不管用了 该怎么做

  • 写回答

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 根据以下文字信息，做EA模型图
  • ¥15 删除虚拟显示器驱动 删除所有 Xorg 配置文件 删除显示器缓存文件 重启系统 可是依旧无法退出虚拟显示器
  • ¥15 vscode程序一直报同样的错，如何解决?
  • ¥15 关于使用unity中遇到的问题
  • ¥15 开放世界如何写线性关卡的用例(类似原神）
  • ¥15 关于并联谐振电磁感应加热
  • ¥60 请查询全国几个煤炭大省近十年的煤炭铁路及公路的货物周转量
  • ¥15 请帮我看看我这道c语言题到底漏了哪种情况吧！
  • ¥60 关机时蓝屏并显示KMODE_EXCEPTION_NOT_HANDLED，怎么修？
  • ¥66 如何制作支付宝扫码跳转到发红包界面