如何使用JQuery在我的导航栏中单击滑动滑动条

Question

目前，我的导航栏中有三个选项卡，BOARD，SKILLS和ABOUT，全部放在一个容器中，底部为容器。当我单击其中一个div时，会选择相应的div名称，以指示我所在的选项卡。这是目前正在工作的，可以在我的codePen.io中看到：

What I have so far - click here

.

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

Answer 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