如何使用 JQuery 在导航栏中点击滑动条

【问题标题】：How to can I have a sliding bar that slides on click in my nav bar using JQuery如何使用 JQuery 在导航栏中点击滑动条
【发布时间】：2016-07-17 00:54:27
【问题描述】：

目前，我的导航栏中有三个选项卡，BOARD、SKILLS 和 ABOUT，它们都在一个容器中，容器底部有边界。当我单击其中一个 div 时，会选择适当的 div 名称，以指示我在哪个选项卡上。这就是当前的工作，可以在我的 codePen.io 中看到：

What I have so far - click here

当我从 BOARD 到 SKILLS 或 BOARD 到 ABOUT 时，我想要做的是让一个栏从一个选项卡滑到下一个选项卡，而不是像静态一样（这是我目前所拥有的）例如单击时从一个选项卡到下一个选项卡的平滑滚动条。我该怎么做呢？我不知道从哪里开始。

【问题讨论】：

查看关于动画或熔岩 js 的谷歌网络基础知识。您可以在选择选项卡上移动一个 div 或移动活动选项卡本身。
bloggerever.com/2014/01/…

标签： javascript jquery html css smooth-scrolling

【解决方案1】：

你可以使用这个函数来滑动一个元素：

function scaleSlider(to) {
  var $slider = $('.slider', '.tabs'),
    $elSpan = to.find('span'),
    width = $elSpan.width(),
    left = $elSpan.position().left;
  $slider.animate({
    width: width,
    left: left
  });
}

在您的 HTML 中，您需要添加 .slider 元素：

<div class="col-md-8 tabs">
    <div class="slider"></div>
    <!-- your html here -->
</div>

CSS：

.tabs .slider {
    position: absolute;
    height:100%;
    border-bottom: 4px solid grey;
}

因此，当您单击菜单元素时，您会调用scaleSlider：

$('.skills').on("click", function() {
    //Your code here
    scaleSlider($(this));
});

请查看此演示：http://codepen.io/anon/pen/EyoBmg

【讨论】：