单击时CSS幻灯片底部边框

Posted 2023-02-25

【中文标题】单击时CSS幻灯片底部边框

【英文标题】：CSS slide bottom border on click

【发布时间】：2016-08-27 13:01:43

【问题描述】：

如何在单击菜单项时滑动菜单项的底部边框。

这是我的代码

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

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

【问题讨论】：

CSS sliding border的可能重复

那是悬停。如果您仔细阅读了问题，我打算点击效果

【参考方案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/

【讨论】：

哇！！这正是我需要的，但我正在寻找 100% CSS 解决方案

但是如果元素不是动态的怎么办。如果只有 3 个元素？那么，我们可以用css来实现吗？

通过纯 CSS 来改变点击状态是相当困难的，如果我们通过 jQuery 切换 active 元素类可以接受吗？

是的，切换课程就可以了。

很好！！但是我们只需要在点击时移动它，而不是在悬停时移动它。我在哪里改变它？

【参考方案2】：

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