Question

如何在点击该项目时滑动菜单项的下边框。

这是我的代码

HTML -

<div class="menu">
    <div class="menu-item active">menu 1</div>
    <div class="menu-item">menu 2</div>
    <div class="menu-item">menu 3</div>
  </div>

少 -

 .menu-item {
      float: left;
      border-bottom: 2px solid grey;
      margin: 0 10px;
    padding: 0 10px;
      cursor: pointer;

  &.active {
    border-color: blue;
  }
}

JS -

$(document).ready(function(){
    $(".menu-item").on("click", function(e) {
      $(".menu-item").removeClass("active");
        console.log("yo");
        $(this).addClass("active");
      });
});

在这里工作演示 - FIDDLE

所以最初“menu1”有底部边框。当我点击“menu2”时，如何从“menu1”到“menu2”滑动（动画）底部边框？

注意 -

以下是预期功能的示例演示 - DEMO

但是上面的演示是使用jQuery实现的。我正在寻找一个纯CSS解决方案。

Answer 1

我为此做了一个研究，遗憾的是我无法通过纯css（动态元素和动态宽度）来做到这一点，我终于创建了一个用于此目的的jQuery插件与css混合，这是我的jQuery插件

jQuery的：

$.fn.RegisterTabBar = function (id) {
    var $ele = $(this);
    if ($ele.prop("tagName") && $ele.prop("tagName").toLowerCase() == "ul" && id != undefined) {
        $ele.attr("data-style-id", id);
        $("<style type='text/css'></style>").attr("id", id).appendTo($("body"));
        $ele.find("li").on("click", function () {
            var $li = $(this),
                CurrentIndex = $ele.find(".active").removeClass("active").index(),
                ClickedIndex = $li.addClass("active").index();

            function SetStyle($ele, $li, IsToLeft) {
                var ID = $ele.attr("data-style-id");
                if (ID == undefined) return;
                if ($ele.width() <= 0) {
                    setTimeout(function () { SetStyle($ele, $li, IsToLeft); }, 100);
                    return;
                }

                $("style#" + ID).text(
                    "ul[data-style-id='" + ID + "']:before { " +
                        "left: " + $li.position().left + "px; " +
                        "right: " + ($ele.width() - $li.position().left - $li.outerWidth()) + "px; " +
                        "-webkit-transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
                        "transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
                    "} "
                );
            }
            SetStyle($ele, $li, ClickedIndex < CurrentIndex);
        });
    }
    return $ele;
}

CSS：

ul.tab-bar,
ul.tab-bar>li { position: relative; }
    ul.tab-bar.bar-style-1:before { background-color: #00668f; } /* Color of the bar*/
    ul.tab-bar:before {
        display: inline-block;
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        height: 3px;
        z-index: 1;
    }
    ul.tab-bar>li { list-style-type: none; border-width: 0; }
    ul.tab-bar.bar-style-1>li.active { color: #00668f; font-weight: 700; }
    li {
            list-style-type: none;
            display: inline-block;
            border-width: 0;
            height: 40px;
            margin: 0 20px;
            background-color: transparent;
            color: #9c9c9c;
            text-align: center;
            cursor: pointer;
        }

在https://jsfiddle.net/czf9kjfd/

上试试

编辑1 -

这是'纯'css版本，只接受固定数量的项目，并通过jQuery切换active类

CSS：

ul li {
  display: inline-block;
    font-weight: bold;
    width: 30%;
    padding: 7px 0;
    text-align: center;
    cursor: pointer;
  list-style-type: none;
}
ul li:last-child {
  margin: 0;
  padding: 0;
    height: 7px;
    background: #00b6ff;
  float: left;
}

ul li.active:nth-child(1) ~ li:last-child,
ul li:nth-child(1):hover ~ li:last-child {
    margin-left: 0%;
}

ul li.active:nth-child(2) ~ li:last-child,
ul li:nth-child(2):hover ~ li:last-child {
    margin-left: 30%;
}

ul li.active:nth-child(3) ~ li:last-child,
ul li:nth-child(3):hover ~ li:last-child {
    margin-left: 60%;
}

li:last-child {
    -webkit-transition: margin-left 0.2s ease;
    -moz-transition: margin-left 0.2s ease;
    -o-transition: margin-left 0.2s ease;
    transition: margin-left 0.2s ease;
    position: relative;
}

试试：https://jsfiddle.net/yqpnckw4/1/

Answer 2

您无法为边框设置动画以获得所需效果。您可以为每个元素创建一个类似于底部边框的元素，并为其宽度或位置设置动画。

单击CSS滑动底部边框

2 个答案:

编辑1 -