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

图片说明

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

3个回答

方法有很多种,我写了两种,你参考一下,看你要那种效果。

<!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>
qq_40021323
妖王令剑 回复itanℒ: 我代码贴出来了, 你参考着就行了
4 个月之前 回复
qq_43468934
itanℒ 哇 老哥 你这说的好难 听不懂
4 个月之前 回复

这不就是选项卡效果吗

把样式做在li上,比如

li.active{
    border-bottom: solid 1px;
}
guangcaiwudong
Kevin.Y.K 回复itanℒ: 那你就放在a上啊,或者再包一层
4 个月之前 回复
qq_43468934
itanℒ 大哥 你这样做 底部那个横线不能缩短啊
4 个月之前 回复
guangcaiwudong
Kevin.Y.K 先来后到,有用请采纳
4 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问