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

关于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条)

报告相同问题？